CoreAnimation(二)-CAPropertyAnimation

CAPropertyAnimation也是一个抽象类,自身并不能对layer进行动画操作,需要其子类CABasicAnimation和CAKeyframeAnimation来实现动画操作。
属性解读:

属性 描述
keyPath 指定接收层动画的关键路径(入门篇提供了部分keyPath,敬请参考)
cumulative 下一次动画执行是否接着刚才的动画,默认为false
additive 如何处理多个动画在同一时间段执行的结果,若为true,同一时间段的动画合成为一个动画,默认为false。(使用 CAKeyframeAnimation 时必须将该属性指定为 true ,否则不会出现期待的结果)

一、CABasicAnimation(基础动画)

该子类中有三个属性:fromValuebyValuetoValue,主要用来操作缩放、平移和旋转等简单动画。随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值会在任意一个或两个属性值的范围内渐变。

fromValue:keyPath相应属性的初始值
byValue:keyPaht相应属性的相对插值
toValue:keyPath相应属性的结束值

有如下几种情况:

  • fromValue和toValue不为nil,keyPath属性值在fromValue与toValue之间渐变
  • fromValue和byValue不为nil,keyPath属性值在fromValue与(fromValue+byValue)之间渐变
  • byValue和toValue不为nil,keyPath属性值在(toValue-byValue)与toValue之间渐变
  • fromValue不为nil,keyPath属性值在fromValue与图层对应当前值之间渐变
  • toValue不为nil,keyPath属性值在图层对应当前值与toValue之间渐变
  • byValue不为nil,keyPath属性值在图层对应当前值与(图层对应当前值+toValue)之间渐变

注意:value的值可以设置为CATransform3D的对象,实现3D动画效果!

旋转动画
  //默认是绕着z轴旋转,也可指定绕某个轴旋转:transform.rotation.x
  let animation = CABasicAnimation(keyPath: "transform.rotation")
  //只设置toValue,动画会在图层对应当前值与toValue之间渐变
  animation.toValue = M_PI * 2
  //设置动画重复次数
  animation.repeatCount = MAXFLOAT
  //设置动画执行时间
  animation.duration = 1
  //添加动画到layer
  redView.layer.addAnimation(animation, forKey: nil)
缩放动画
  //transform.scale默认是x,y,z三个方向同时同比例缩放,也可指定某一个方向缩放
  let animation = CABasicAnimation(keyPath: "transform.scale")
  //只设置fromValue动画会在fromValue与图层对应当前值之前渐变
  animation.fromValue = -CGRectGetWidth(view.bounds)
  //设置动画重复次数
  animation.repeatCount = MAXFLOAT
  //设置动画执行时间
  animation.duration = 1
  //添加动画到layer,添加动画的key可以为nil,也可以为任意值,是用来在CAAnimation协议方法中区分不同动画,相当于UIView的tag
  greenView.layer.addAnimation(animation, forKey: nil)
平移动画:
  //keyPath可设置为x,y,z在对应方向平移或者直接写成transform.translation,在x和y方向同时平移
  let animation = CABasicAnimation(keyPath: "transform.translation.x")
  animation.fromValue = -CGRectGetWidth(view.bounds)
  animation.toValue = CGRectGetWidth(view.bounds)
  //设置动画重复次数
  animation.repeatCount = MAXFLOAT
  //设置动画执行时间
  animation.duration = 1
  //添加动画到layer
  blueView.layer.addAnimation(animation, forKey: nil)

动画效果图:



二、CAKeyframeAnimation

CALayer的关键帧动画与UIView的关键帧动画类似,UIView的动画可以看做是核心动画的简单封装。关键帧动画的值可以指定为一个值数组或者一个路径,和CABasicAnimation不同的是,关键帧动画在同一时间内对同一layer可以做多种不同动画,并且可以控制各动画的执行节奏。CAKeyframeAnimation常用的两个属性是valuesduration,这两个属性就可以简单的设置动画了,其余属性提供了更加细致化,更加强大的功能!
属性解读:

  • values:关键帧动画值的数组,当path为nil时设置有效,否则优先选择属性path做动画
  • path:动画执行的点路径(通过Core Graphics提供的API来绘制路径),设置了path,values将被忽略
  • keyTimes:关键帧动画每帧动画开始执行时间点的数组,取值范围为0~1,数组中相邻两个值必须遵循后一个值大于或等于前一个值,并且最后的值不能为大于1。设置的时候与calculationMode有关,具体请查看文档。未设置时默认每帧动画执行时间平均(公式:总时间/(总帧数-1))。例如,如果你指定了一个5帧,10秒的动画,那么每帧的时间就是2.5秒钟:10 /(5-1)=2.5
  • rotationMode:设置路径旋转,当设置path有不同角度时,会自动旋转layer角度与path相切
  • timingFunctions:动画执行效果数组,CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn),有kCAMediaTimingFunctionLinearkCAMediaTimingFunctionEaseInkCAMediaTimingFunctionEaseOutkCAMediaTimingFunctionEaseInEaseOutkCAMediaTimingFunctionDefault等选项|
  • calculationMode:关键帧时间计算方法,每帧动画之间如何过渡,类似与UIView的keyframeAnimation。有kCAAnimationLinearkCAAnimationDiscrete、** kCAAnimationPaced kCAAnimationCubic kCAAnimationCubicPaced**等选项
    不同calculationMode过渡示意图
摇一摇
        //摇一摇
        let shakeAnimation = CAKeyframeAnimation(keyPath: "transform.rotation")
        //设置晃动角度
        let angle = M_PI_4 / 2
        //设置关键帧动画的值
        shakeAnimation.values = [angle,-angle,angle]
        //设置关键帧动画每帧的执行时间,这里不设置也行,默认平均分配时间
        //shakeAnimation.keyTimes = [NSNumber(double: 0), NSNumber(double: 0.5), NSNumber(double: 1)]
        //设置动画重复次数,默认为1次
        shakeAnimation.repeatCount = MAXFLOAT
        //设置动画执行效果
        //shakeAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)]
        //设置相邻动画过渡方式
        //shakeAnimation.calculationMode = kCAAnimationCubic
        //添加动画
        view1.layer.addAnimation(shakeAnimation, forKey: nil)
贝赛尔曲线画“M”
    //创建贝赛尔曲线
        let path = UIBezierPath()
        //设置动画的执行路径为一个M的形状
        path.moveToPoint(CGPoint(x: 40, y: 300))
        path.addLineToPoint(CGPoint(x: 80, y: 150))
        path.addLineToPoint(CGPoint(x: 120, y: 300))
        path.addLineToPoint(CGPoint(x: 160, y: 150))
        path.addLineToPoint(CGPoint(x: 200, y: 300))
        let bezierAnimation = CAKeyframeAnimation(keyPath: "position")
        //由于CAKeyframeAnimation的path为CGPath,所以这里要转换一次
        bezierAnimation.path = path.CGPath
        //设置动画时间
        bezierAnimation.duration = 4
        //自动旋转layer角度与path相切
        bezierAnimation.rotationMode = kCAAnimationRotateAuto
        //设置动画重复次数
        bezierAnimation.repeatCount = MAXFLOAT
        //设置自动逆向
        bezierAnimation.autoreverses = true
        view2.layer.addAnimation(bezierAnimation, forKey: nil)
普通路径画圆
        let circlePath = CGPathCreateMutable()
        CGPathAddEllipseInRect(circlePath, nil, CGRect(x: 375/2, y: 667/2, width: 100, height: 100))
        let circleAnimation = CAKeyframeAnimation(keyPath: "position")
        circleAnimation.path = circlePath
        circleAnimation.duration = 2
        circleAnimation.repeatCount = MAXFLOAT
        view3.layer.addAnimation(circleAnimation, forKey: nil)
缩放
        let scaleAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
        scaleAnimation.values = [0.0, 0.4, 0.8, 1.2, 1.6, 1.2, 0.8, 0.4, 0.0]
        scaleAnimation.duration = 2
        scaleAnimation.autoreverses = true
        scaleAnimation.repeatCount = MAXFLOAT
        view4.layer.addAnimation(scaleAnimation, forKey: nil)

动画效果图:


结语

简单的介绍了CABasicAnimation和CAKeyframeAnimation的使用方法,希望对看这篇文章的你有些帮助。很多有趣的动画其实就是将普通动画用到极致,这就需要我们多动手去做,多动脑去想。

推荐阅读更多精彩内容