iOS CAKeyframeAnimation关键帧动画

概述

作为新年的开篇文章，首先祝福各位同仁新年快乐，万事大吉，技术薪资更上一层楼。

本篇文章简单的介绍一下CAKeyframeAnimation关键帧动画，之前的一篇文章介绍过CABasicAnimation，这个关键帧动画和CABasicAnimation很像，甚至有过之而无不及。一起来看看吧。

CAKeyframeAnimation

An object that provides keyframe animation capabilities for a layer object.

为图层对象提供关键帧动画功能的对象。

我们可以使用继承的init(keyPath:)方法创建CAKeyframeAnimation对象，并制定keyPath和关键帧的数值，来控制时间和动画。

对于大多数类型的动画，可以使用values和keyTimes属性来指定关键帧值。在动画过程中，Core Animation通过在我们提供的值之间插入中间值。如果我们对一个坐标点进行动画时，比如图层的位置，我们可以为这个坐标点指定一个路径，而不是单独的值。动画的节奏是由我们提供的时间信息控制的。

常用属性	类型	说明
values	[Any]?	指定关键帧的数值数组。
path	CGPath?	动画路径。
keyTimes	[NSNumber]?	一个可选的NSNumber对象数组，定义了应用给定关键帧段的时间。
timingFunctions	[CAMediaTimingFunction]?	一个可选的CAMediaTimingFunction对象数组，定义了每个关键帧段的速度。
calculationMode	CAAnimationCalculationMode	指定了如何计算中间关键帧值。主要针对的是每一帧的内容为一个座标点的情况，也就是对anchorPoint和position进行的动画。当在平面座标系中有多个离散的点的时候，可以是离散的，也可以直线相连后进行插值计算，也可以使用圆滑的曲线将他们相连后进行插值计算。默认值为linear。 linear：简单的线性计算之间的关键帧值。当关键帧为座标点的时候，关键帧之间直接直线相连进行插值计算。 discrete：每个关键帧值依次使用，不计算插值值。 paced：动画均匀进行，而不是按keyTimes设置的或者按关键帧平分时间，此时keyTimes和timingFunctions无效。 cubic：对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算。 cubicPaced：在cubic的基础上使得动画运行变得均匀，就是系统时间内运动的距离相同，此时keyTimes以及timingFunctions也是无效的。
rotationMode	CAAnimationRotationMode?	确定沿路径动画的对象是否旋转以匹配路径切线。默认值为nil，即不做任何旋转。 rotateAuto：自动旋转。 rotateAutoReverse：自动翻转。

说了这么多，看一个官方的demo：

    func keyFrameAnimation() {
        let colorKeyframeAnimation = CAKeyframeAnimation(keyPath: "backgroundColor")
        colorKeyframeAnimation.values = [UIColor.red.cgColor, UIColor.green.cgColor, UIColor.blue.cgColor]
        colorKeyframeAnimation.keyTimes = [0, 0.5, 1]
        colorKeyframeAnimation.duration = 2
        self.view.layer.add(colorKeyframeAnimation, forKey: nil)
    }

执行效果如下：

移动动画

    func positionChange() {
        let keyframeAnimation = CAKeyframeAnimation(keyPath: "position")
        keyframeAnimation.duration = 2.0
        keyframeAnimation.isRemovedOnCompletion = false
        keyframeAnimation.fillMode = .forwards
        keyframeAnimation.path = UIBezierPath(ovalIn: CGRect(x: 100, y: 150, width: 100, height: 100)).cgPath
        keyframeAnimation.repeatCount = 5
        animationLayer.add(keyframeAnimation, forKey: nil)
    }

执行效果如下：

抖动动画

    func shakeActionDemo() {
        let keyframeAnimation = CAKeyframeAnimation(keyPath: "transform.rotation")
        keyframeAnimation.duration = 0.3
        keyframeAnimation.values = [Double.pi/4, -Double.pi/4, Double.pi/4]
        keyframeAnimation.repeatCount = 6
        animationLayer.add(keyframeAnimation, forKey: nil)
    }

执行效果如下：

放缩动画

    func scaleActionDemo() {
        let keyframeAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
        keyframeAnimation.duration = 0.5
        keyframeAnimation.values = [1.0, 1.5, 2.0, 1.5, 1.0]
        keyframeAnimation.repeatCount = 6
        animationLayer.add(keyframeAnimation, forKey: nil)
    }

执行效果如下：

更多keyPath请详见CABasicAnimation这篇文章。

小车移动的动画

    func carMoveDemo() {
        // 绘制线路
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 40, y: 200))
        path.addCurve(to: CGPoint(x: 400, y: 200), controlPoint1: CGPoint(x: 150, y: 100), controlPoint2: CGPoint(x: 300, y: 300))
        
        let pathShape = CAShapeLayer()
        pathShape.path = path.cgPath
        pathShape.strokeColor = UIColor.red.cgColor
        pathShape.fillColor = nil
        self.view.layer.addSublayer(pathShape)
        
        let moveAnamation = CAKeyframeAnimation(keyPath: "position")
        moveAnamation.path = path.cgPath
        moveAnamation.duration = 2
        moveAnamation.rotationMode = .rotateAuto
        moveAnamation.isRemovedOnCompletion = false
        moveAnamation.fillMode = .forwards
        
        let carShape = CALayer()
        carShape.frame = CGRect(x: 40, y: 160, width: 30, height: 30)
        carShape.contents = UIImage(named: "car")?.cgImage
        carShape.anchorPoint = CGPoint(x: 0.5, y: 0.8)
        carShape.add(moveAnamation, forKey: nil)
        self.view.layer.addSublayer(carShape)
    }

CABasicAnimation与CAKeyframeAnimation区别

CAKeyframeAnimation可以说是CABasicAnimation的一个升级版。

CABasicAnimation只能从一个值变化到另一个值，而CAKeyframeAnimation提供了一个数组，里面提供可以提供一系列的关键值。

 

以上即是笔者对CAKeyframeAnimation动画的理解，如果不对的地方，还请路过的朋友多加指正，不喜勿喷噢！

本篇文章出自https://blog.csdn.net/guoyongming925的博客，如需转载，请标明出处。