CoreAnimation

CoreAnimation备忘

CoreAnimation是专门处理动画的，它可以实现强大炫目的动画功能，Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。需要注意的是Core Animation作用在CALayer上的，并不是UIView

 

动画常用类/结构图

CABasicAnimation -- 实例

        // 创建动画，keyPath是一个路径，代表动画将修改的属性
        let basicAnimation = CABasicAnimation(keyPath: "position")
        let fromPosition = layer?.position
        let toPositon = CGPointMake(200, 200)
        basicAnimation.fromValue = NSValue(CGPoint: fromPosition!)
        basicAnimation.toValue = NSValue(CGPoint: toPositon)
        basicAnimation.duration = 0.5
        basicAnimation.repeatCount = MAXFLOAT
        basicAnimation.removedOnCompletion = false
        basicAnimation.fillMode = kCAFillModeForwards
        basicAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        basicAnimation.autoreverses = true
        basicAnimation.beginTime = CACurrentMediaTime() + 5
        
        // 创建动画后 添加到图层上
        layer?.addAnimation(basicAnimation, forKey: nil)    

 属性介绍：

• fromValue：起点的值。
• toValue：终点的值，这是一个绝对的值，意思是动画最终会到达这个值。
• byValue：终点的值，这是一个相对的值，意思以起点为准增加多少值。
• duration：动画时长。
• repeatCount：重复次数，如果重复无数次使用 MAXFLOAT。
• removedOnCompletion：动画结束后，是否删除动画。
• fillMode：填充模式，当赋值kCAFillModeForwards 并且 removedOnCompletion为false时，动画执行完毕后不会回到初始状态。
• timingFunction：动画的速度变化，比如：先快后慢，或先慢后快。
• beginTime：动画开始时间。
• autoreverses：是否执行逆动画

初始化方法的keypath设置：

• let basicAnimation = CABasicAnimation(keyPath: "position")：位移动画
• let basicAnimation = CABasicAnimation(keyPath: "transform.rotation.z")：旋转动画，x,y,z三个轴都可以
• let basicAnimation = CABasicAnimation(keyPath: "transform.scale")：缩放动画
• let basicAnimation = CABasicAnimation(keyPath: "alpha")：透明动画

这些只是常用的，更多属性进入父类查看。

CAAnimationGroup -- 实例

        // 创建位移动画
        let animation1 = CABasicAnimation(keyPath: "position")
        animation1.byValue = NSValue(CGPoint: CGPointMake(100, 100))
        
        // 创建旋转动画
        let animation2 = CABasicAnimation(keyPath: "transform.rotation.z")
        animation2.toValue = NSNumber(double: M_PI * 2)
        
        // 创建动画组
        let group = CAAnimationGroup()
        // 设置一些属性
        group.duration = 2.0
        group.autoreverses = true
        group.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        group.animations = [animation1, animation2]
        group.repeatCount = MAXFLOAT
        
        // 添加动画组
        layer?.addAnimation(group, forKey: nil)

 注意：动画组中的动画是一起执行的。

顺序动画的执行：

    // 1、懒加载 只执行一次，并设置动画代理
    lazy var animations: [CAAnimation] = {
        // 创建位移动画
        let animation1 = CABasicAnimation(keyPath: "position")
        animation1.byValue = NSValue(CGPoint: CGPointMake(100, 100))
        animation1.duration = 1.0
        animation1.removedOnCompletion = false
        animation1.fillMode = kCAFillModeForwards
        animation1.delegate = self
        
        // 创建旋转动画
        let animation2 = CABasicAnimation(keyPath: "transform.rotation.z")
        animation2.toValue = NSNumber(double: M_PI * 2)
        animation2.duration = 1.0
        animation2.removedOnCompletion = false
        animation2.fillMode = kCAFillModeForwards
        animation2.delegate = self

        var array = [animation1, animation2]
        return array
    }()

    // 2、添加第一个动画
    layer?.addAnimation(animations[0], forKey: nil)

    // 3、实现代理方法
    // MARK: 动画代理
    override func animationDidStart(anim: CAAnimation) {
        animations.removeFirst()
    }
    
    override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
        guard let animation = animations.first else { return }
        layer?.addAnimation(animation, forKey: nil)
    }

 

 CAKeyframeAnimation -- 实例

CAKeyframeAnimation-关键帧动画，它有两个重要的属性(二选一)：

• path：CGPathRef对象，默认为nil，顾名思义 当设置path时、动画会按照这个路径执行动画，当设置了values时 这个属性就会被覆盖。
• values：一个数组，提供关键帧的值(一组)，当设置path时 不必设置设个属性。

        // 使用path
        let keyframe = CAKeyframeAnimation(keyPath: "position")
        // 创建路径
        let path = CGPathCreateMutable()
        // 移动到原点
        CGPathMoveToPoint(path, nil, 50, 100)
        // 添加直线路径
        CGPathAddLineToPoint(path, nil, 300, 80)
        CGPathAddLineToPoint(path, nil, 150, 250)
        // 添加曲线
        CGPathAddCurveToPoint(path, nil, 49.0, 200, -100, 0, 150, 150)
        
        keyframe.path = path
        keyframe.duration = 3.0
        
        layer?.addAnimation(keyframe, forKey: nil)

        /* ----------------------------分割线---------------------------- */

        // 使用values
        let keyframe = CAKeyframeAnimation(keyPath: "position")
        // 创建point
        let p1 = layer?.position
        let p2 = CGPointMake(50, 50)
        let p3 = CGPointMake(100, 300)
        let p4 = CGPointMake(150, 150)
        
        // 转换成NSValue
        let v1 = NSValue(CGPoint: p1!)
        let v2 = NSValue(CGPoint: p2)
        let v3 = NSValue(CGPoint: p3)
        let v4 = NSValue(CGPoint: p4)
        
        let values = [v1, v2, v3, v4]
        keyframe.values = values
        keyframe.duration = 4.0
        
        layer?.addAnimation(keyframe, forKey: nil)

 控制每一帧的时间：

算法：总时间 / (总帧数 - 1)，也就是说如果指定了3帧、10秒的总时间，10 / (3 - 1) = 5

        // 使用values
        let keyframe = CAKeyframeAnimation(keyPath: "position")
        // 创建point
        let p1 = layer?.position
        let p2 = CGPointMake(50, 50)
        let p3 = CGPointMake(100, 300)
        let p4 = CGPointMake(150, 150)
        
        // 转换成NSValue
        let v1 = NSValue(CGPoint: p1!)
        let v2 = NSValue(CGPoint: p2)
        let v3 = NSValue(CGPoint: p3)
        let v4 = NSValue(CGPoint: p4)
        
        let values = [v1, v2, v3, v4]
        keyframe.values = values
        keyframe.duration = 4.0
        // 取值在0 ~ 1.0之间
        keyframe.keyTimes = [NSNumber(double: 0.0), NSNumber(double: 0.8), NSNumber(double: 1.0), NSNumber(double: 0.2)]
        // 每一帧的计算模式
        keyframe.calculationMode = kCAAnimationLinear
        
        layer?.addAnimation(keyframe, forKey: nil)

CATransition -- 实例

        let transition = CATransition()
        transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        transition.duration = 0.5
        transition.removedOnCompletion = false
        transition.fillMode = kCAFillModeForwards
        // 过渡类型
        transition.type = kCATransitionReveal
        // 过渡方向
        transition.subtype = kCATransitionFromTop
        
        layer?.addAnimation(transition, forKey: nil)
        layer?.backgroundColor = UIColor.blackColor().CGColor

 过渡类型（type）：

• kCATransitionFade：交叉淡化过渡 
• kCATransitionMoveIn：新视图移到旧视图上面 
• kCATransitionPush：新视图把旧视图推出去 
• kCATransitionReveal：将旧视图移开,显示下面的新视图
• "pageCurl"：向上翻一页 
• "pageUnCurl"：向下翻一页 
• "rippleEffect"：滴水效果 
• "suckEffect"：收缩效果，如一块布被抽走 
• "cube"：立方体效果
• "oglFlip"：上下翻转效果

过渡方向（subType）：

• kCATransitionFromLeft：由左向右（默认）
• kCATransitionFromRight：由右向左
• kCATransitionFromTop：由下向上
• kCATransitionFromBottom：由上向下