美文网首页iOS动画效果
iOS中CALayer动画的暂停与继续

iOS中CALayer动画的暂停与继续

作者: 一个不太努力的代码搬运工 | 来源:发表于2017-10-29 11:49 被阅读17次

    此篇文章主要讲述了CALayer与动画相关的一些操作属性。

    • CALayer的说明
    image.png
    从中我们可以看出CALayer遵循了三个代理协议,其中主要说说NSSecureCodingCAMediaTiming
    NSSecureCoding继承自NSCodingNSSecureCodingNSCoding是一样的,除了在解码时要同时指定key和要解码的对象的类,如果要求的类和从文件中解码出的对象的类不匹配,NSCoder会抛出异常,告诉你数据已经被篡改了。
    CAMediaTiming中包含了很多属性
        /* The begin time of the object, in relation to its parent object, if
         * applicable. Defaults to 0. */
        
        public var beginTime: CFTimeInterval { get set }
    
        
        /* The basic duration of the object. Defaults to 0. */
        
        public var duration: CFTimeInterval { get set }
    
        
        /* The rate of the layer. Used to scale parent time to local time, e.g.
         * if rate is 2, local time progresses twice as fast as parent time.
         * Defaults to 1. */
        
        public var speed: Float { get set }
    
        
        /* Additional offset in active local time. i.e. to convert from parent
         * time tp to active local time t: t = (tp - begin) * speed + offset.
         * One use of this is to "pause" a layer by setting `speed' to zero and
         * `offset' to a suitable value. Defaults to 0. */
        
        public var timeOffset: CFTimeInterval { get set }
    
        
        /* The repeat count of the object. May be fractional. Defaults to 0. */
        
        public var repeatCount: Float { get set }
    
        
        /* The repeat duration of the object. Defaults to 0. */
        
        public var repeatDuration: CFTimeInterval { get set }
    
        
        /* When true, the object plays backwards after playing forwards. Defaults
         * to NO. */
        
        public var autoreverses: Bool { get set }
    
        
        /* Defines how the timed object behaves outside its active duration.
         * Local time may be clamped to either end of the active duration, or
         * the element may be removed from the presentation. The legal values
         * are `backwards', `forwards', `both' and `removed'. Defaults to
         * `removed'. */
        
        public var fillMode: String { get set }
    
    

    beginTime 继承CAMediaTiming协议的对象的起始时间
    duration 基本动画的持续时间
    speed动画的运行速度,当为0时会停止动画,speed越大说明动画执行速度越快
    timeOffset 动画的时间偏移,也就是上次动画的暂停/继续 距离本次动画的继续/暂停的时间差
    repeatCount 重复次数
    repeatDuration重复的时间
    autoreverses是否会回到原来的位置
    fillMode
    CAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
    kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
    kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
    kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

    • 下面进行实例演习
      做一个不停旋转的动画,通过点击事件控制动画的暂停或播放
        ///头像旋转,开始动画
        fileprivate func beginAnimation() {
            
            let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
            rotateAnimation.fromValue = 0
            rotateAnimation.toValue = (Double.pi * 2)
            rotateAnimation.duration = 20
            rotateAnimation.repeatCount = MAXFLOAT
            singerImageView.layer.add(rotateAnimation, forKey: "")
        }
    

    写一个CALayer的分类,控制动画的暂停与继续

    extension CALayer {
        ///暂停动画
        func pauseAnimation() {
            //取出当前时间,转成动画暂停的时间
            let pausedTime = self.convertTime(CACurrentMediaTime(), from: nil)
            //设置动画运行速度为0
            self.speed = 0.0;
            //设置动画的时间偏移量,指定时间偏移量的目的是让动画定格在该时间点的位置
            self.timeOffset = pausedTime
        }
        ///恢复动画
        func resumeAnimation() {
            //获取暂停的时间差
            let pausedTime = self.timeOffset
            self.speed = 1.0
            self.timeOffset = 0.0
            self.beginTime = 0.0
            //用现在的时间减去时间差,就是之前暂停的时间,从之前暂停的时间开始动画
            let timeSincePause = self.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
            self.beginTime = timeSincePause
        }
    }
    

    效果图如下:

    animation.gif

    相关文章

      网友评论

        本文标题:iOS中CALayer动画的暂停与继续

        本文链接:https://www.haomeiwen.com/subject/lnxypxtx.html