IOS 核心动画

image.png

一、CoreAnimation 结构

上图就是CoreAnimation 的结构图,
1、CAAnimtaionGroup,CApropertyAnimation ,CATransition 继承于CAAniamtion
2、CABasicAnimation ,CAKeyframeAnimation 继承于CAPropertyAnimation

二、本文主要介绍一下CABasicAnimation(基础动画),CAKeyframeAnimation (关键帧动画),CAAnimtaionGroup(组动画),还有CATransition(转场动画),这几个也是经常使用的动画

1、 基础动画CABasicAnimation

    let animation  = CABasicAnimation.init(keyPath: "position")
    animation.fromValue = NSValue.init(cgPoint: CGPoint(x: 50, y: KH/2 - 75))
    animation.toValue =  NSValue.init(cgPoint: CGPoint(x:KW -  50, y: KH/2 - 75))
    animation.duration = 1
    self.squrView.layer.add(animation, forKey: "positionAnimation")

1)keyPath 可以是 ,position(位置)、 opacity (透明度) 、transform.scale(比例) 、transform.rotation.z(旋转)、backgroundColor(背景颜色) 等
2)fillMode 动画结束后的状态类型

kCAFillModeRemoved(动画结束后，layer会恢复到之前的状态)
kCAFillModeForwards (当动画结束后，layer会一直保持着动画最后的状态)
kCAFillModeBackwards (当在动画开始前,你只要把layer加入到一个动画中,layer便立即进入动画的初始状态并等待动画开始)
kCAFillModeBoth (这个其实就是上面两个的合成.动画加入后开始之前，layer便处于动画初始状态，动画结束后layer保持动画最后的状态)

3)removedOnCompletion 结束后是否移除

2、帧动画CAKeyframeAnimation

帧动画是CABasicAnimation 动画的扩展,
1)基础动画只有fromValue,toView,而帧动画有一个values数组,里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间（duration）内，依次显示values数组中的每一个关键帧
2)path属性:让涂层按照路径轨迹移动.

    let keyFrameAnimation = CAKeyframeAnimation.init(keyPath: "position")
    let value  =  NSValue.init(cgPoint: CGPoint.init(x: 50, y: KH/2 - 50 ))
    let value1  =  NSValue.init(cgPoint: CGPoint.init(x: KW/3, y: KH/2 - 50 ))
    let value2  =  NSValue.init(cgPoint: CGPoint.init(x: KW/3, y: KH/2 + 50))
    let value3  =  NSValue.init(cgPoint: CGPoint.init(x: KW*2/3, y: KH/2 + 50 ))
    let value4  =  NSValue.init(cgPoint: CGPoint.init(x: KW*2/3, y: KH/2 - 50))
    let value5  =  NSValue.init(cgPoint: CGPoint.init(x: KW - 50, y: KH/2 - 50 ))
    keyFrameAnimation.values = [value,value1,value2,value3,value4,value5]
    keyFrameAnimation.duration = 1
    self.squrView.layer.add(keyFrameAnimation, forKey: keyFrameAnimation.keyPath)

3、动画组CAAnimtaionGroup

1)动画组可以把基础动画和关键帧动画结合起来
2)属性说明:animations：用来保存一组动画对象的NSArray
3)组动画可以同时进行,也可以连续进行,可以修改 beginTime 达到效果

    let keyFrameAnimation = CAKeyframeAnimation.init(keyPath: "position")
    let value  =  NSValue.init(cgPoint: CGPoint.init(x: 50, y: KH/2 - 50 ))
    let value1  =  NSValue.init(cgPoint: CGPoint.init(x: KW/3, y: KH/2 - 50 ))
    let value2  =  NSValue.init(cgPoint: CGPoint.init(x: KW/3, y: KH/2 + 50))
    let value3  =  NSValue.init(cgPoint: CGPoint.init(x: KW*2/3, y: KH/2 + 50 ))
    let value4  =  NSValue.init(cgPoint: CGPoint.init(x: KW*2/3, y: KH/2 - 50))
    let value5  =  NSValue.init(cgPoint: CGPoint.init(x: KW - 50, y: KH/2 - 50 ))
    keyFrameAnimation.values = [value,value1,value2,value3,value4,value5]
    let scaleAnimation  = CABasicAnimation.init(keyPath: "transform.scale")
    scaleAnimation.fromValue =  0.8
    scaleAnimation.toValue =  2
    let rotationAnimation  = CABasicAnimation.init(keyPath: "transform.rotation.z")
    rotationAnimation.toValue =  Double.pi*4
    let groupAni = CAAnimationGroup.init()
    groupAni.animations = [keyFrameAnimation,scaleAnimation,rotationAnimation]
    groupAni.duration = 4
    self.squrView.layer.add(groupAni, forKey: "groupAnimation")

4、转场动画CATransition

    let animation  = CATransition.init()
    animation.type = .fade
    animation.duration = 1
    self.squrView.layer.add(animation, forKey: "fadeAnimation")

属性说明:
type:动画过度类型
subtype：动画过渡方向