CoreAnimation(二)-CAPropertyAnima

2016-08-23 本文已影响561人 ZhHS

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

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

一、CABasicAnimation（基础动画）

该子类中有三个属性：fromValue、byValue、toValue，主要用来操作缩放、平移和旋转等简单动画。随着动画的进行，在长度为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常用的两个属性是values和duration，这两个属性就可以简单的设置动画了，其余属性提供了更加细致化，更加强大的功能！
属性解读：

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),有kCAMediaTimingFunctionLinear、kCAMediaTimingFunctionEaseIn、kCAMediaTimingFunctionEaseOut、kCAMediaTimingFunctionEaseInEaseOut、kCAMediaTimingFunctionDefault等选项|
calculationMode：关键帧时间计算方法，每帧动画之间如何过渡，类似与UIView的keyframeAnimation。有kCAAnimationLinear、kCAAnimationDiscrete、** 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)