图层时间CAMediaTiming
CoreAnimationXmind.png
这是 Core Animation 的系列文章，介绍了 Core Animation 的用法，以及如何进行性能优化。
上一篇文章介绍了使用CAAnimation及其子类创建多种类型动画。动画是一段时间的变化，因此时间也是一个至关重要的概念。这一篇文章介绍 Core Animation 中的时间。
1. CAMediaTiming 协议
CAMediaTiming协议定义了一系列属性，用于管理动画过程中的时间。CALayer和CAAnimation都遵守CAMediaTiming协议，因此，时间可以针对于图层，也可以针对于动画。
1.1 常用属性
-
duration：是CFTimeInterval类型，单位为秒，与NSTimeInterval类似。指定动画单次迭代时长。 -
repeatCount：指定动画重复次数。如果duration为2秒，repeatCount为3.5次，则动画总时长为7秒。duration和repeatCount属性默认均为0，但不意味着动画时长0秒，播放0次，这里的0表示使用默认值，即0.25秒、1次。 -
repeatDuration：指定循环时间，而非repeatCount的循环次数。 -
autoreverses：如果为true，则向前播放后后退播放。默认为false。
1.2 使用 repeatDuration 和 autoreverses 实现摆动动画
下面代码实现了无限摆动门的动画。其中，使用autoreverses实现自动反转摆动，设置repeatDuration为infinity实现永不停歇摆动。repeatCount和repeatDuration可能冲突，同时使用的结果可能是未定义的。
private func swingingDoorUsingAutoreverse() {
doorLayer.bounds = CGRect(x: 0, y: 0, width: 128, height: 256)
// 设置锚点为layer左边缘中点
doorLayer.anchorPoint = CGPoint(x: 0, y: 0.5)
doorLayer.contents = UIImage(named: "Door")?.cgImage
view.layer.addSublayer(doorLayer)
// Apply perspective transform
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
view.layer.sublayerTransform = perspective
// Apply swinging animation
let animation = CABasicAnimation(keyPath: "transform.rotation.y")
animation.toValue = -.pi/2.0
animation.duration = 2.0
animation.repeatDuration = .infinity
animation.autoreverses = true
doorLayer.add(animation, forKey: nil)
}
效果如下：
CATimingAutoreverses.gif
1.3 相对时间
Core Animation 中的时间是相对时间，每个动画有自身的时间概念，可以独立的加速、延时或偏移。
beginTime属性指定动画开始之前的延迟时间，动画起点从添加到可见图层开始计算。默认值为0，即添加到可见图层后动画立即开始。
speed是时间的倍数，默认为1.0。speed减小，动画、图层时间会变慢；speed增大，动画、图层时间会变快。如果speed为2.0，对于一个duration为1秒的动画，实际上0.5秒就会完成。如果为 layer 的speed是2.0，则所有添加到该 layer 的速度都会变为二倍。如果动画speed是3，layer 的speed是0.5，则动画是正常速度的1.5倍。
timeOffset指定时间偏移量。beginTime延迟动画开始时间，timeOffset快进到指定时间。例如，动画时长1秒，timeOffset为0.5秒意味着动画从0.5秒开始，执行到结束后再次从0秒执行到0.5秒。
与beginTime不同，timeOffset不受speed影响。例如，动画duration时间为1秒，设置speed为2.0、timeOffset为0.5，此时动画时长变为0.5秒。timeOffset让动画从结束位置开始，但仍然会播放一个完整的时长（这里时0.5秒），这个动画仅仅是从结尾开始播放，最终完成了一个循环。
使用下面的示例设置不同的speed、timeOffset，点击 Play 按钮查看播放效果：
private func createShip() {
// Create a path
let centerX = view.bounds.size.width / 2
let centerY = view.bounds.size.height / 2
bezierPath.move(to: CGPoint(x: view.bounds.size.width / 2 - 150, y: centerY))
bezierPath.addCurve(to: CGPoint(x: centerX + 150, y: centerY), controlPoint1: CGPoint(x: centerX - 75, y: centerY - 150), controlPoint2: CGPoint(x: centerX + 75, y: centerY + 150))
// Draw the path using a CAShapeLayer
let pathLayer = CAShapeLayer()
pathLayer.path = bezierPath.cgPath
pathLayer.fillColor = UIColor.clear.cgColor
pathLayer.strokeColor = UIColor.red.cgColor
pathLayer.lineWidth = 3.0
view.layer.addSublayer(pathLayer)
// Add the ship
shipLayer.bounds = CGRect(x: 0, y: 0, width: 64, height: 64)
shipLayer.position = CGPoint(x: centerX - 150, y: centerY)
shipLayer.contents = UIImage(named: "Ship")?.cgImage
view.layer.addSublayer(shipLayer)
updateSliders()
}
@IBAction func updateSliders() {
let timeOffset = timeOffsetSlide.value
timeOffsetLabel.text = String(format: "%.2f", timeOffset)
let speed = speedSlide.value
speedLabel.text = String(format: "%.2f", speed)
}
@IBAction func playButtonTapped(_ sender: Any) {
// Create the keyframe animation
let animation = CAKeyframeAnimation(keyPath: "position")
animation.timeOffset = CFTimeInterval(timeOffsetSlide.value)
animation.speed = speedSlide.value
animation.duration = 1.0
animation.path = bezierPath.cgPath
animation.rotationMode = .rotateAuto
animation.isRemovedOnCompletion = true
shipLayer.add(animation, forKey: nil)
}
效果如下：
CAtimeOffset.gif
1.4 fillMode
fillMode属性可以管理动画开始、结束时的表现。
1.4.1 removed
fillMode默认值为CAMediaTimingFillMode.removed。如果设置了beginTime，动画从beginTime开始；如果没有设置，则立即开始。动画结束后移除动画。
CAfillModeRemoved.png
1.4.2 backwards
无论是否立即执行动画，CAMediaTimingFillMode.backwards都会展示动画的第一帧。
CAfillModeBackwards.png
1.4.3 forwards
CAMediaTimingFillMode.forwards像往常一样播放动画，但将动画的最后一帧保留到屏幕上，直到你移除动画。
CAfillModeForwards.png
1.4.4 both
CAMediaTimingFillMode.both是forwards和backwards的组合，即立即显示动画的第一帧，动画结束后保留最后一帧。
CAfillModeBoth.png
如果想保留上一部分动画结束状态，可以设置动画为
forwards，并设置isRemovedOnCompletion为 false。
那我们是否需要使用fillMode？是否应该移除动画？应如何更新图层以实现平滑动画？
最重要的一条原则就是：移除动画并尽可能避免使用fillMode，除非要实现的效果没有其他方式可以实现。fillMode会使UI元素失去交互性，并且图层与model不匹配。一般在添加动画后立即更新图层 model 即可。如果出现动画起始、终止时闪烁，可以尝试添加动画前更新 model。
2. 时间层级关系
在第一篇文章CoreAnimation基本介绍中介绍了图层层级结构，动画时间也有类似结构。
每个动画、图层有自身时间概念。调整一个图层的时间会影响其自身及其子类的动画，但不会影响父图层。
2.1 全局时间和本地时间
Core Animation 的全局时间也称为马赫时间（mach time），mach 是iOS、macOS系统内核名称。在同一设备的不同线程、进程中，mach time 相同；不同设备 mach time 不同。mach time 可以作为动画时间参照点。使用以下函数获取马赫时间：
let machTime = CACurrentMediaTime()
CACurrentMediaTime()具体值无关紧要，真实作用在于为动画时间测量提供了一个相对值。CACurrentMediaTime()不能用于更新时钟时间。
每个CALayer、CAAnimation实例有自身时间概念，是根据父图层、动画层级中的beginTime、timeOffset和speed等属性计算出。就跟转换不同layer间坐标系统一样，CALayer也提供了转换不同图层之间的本地时间方法：
-
convertTime:fromLayer:将 time interval 从指定 layer 转换为接收者时间空间。 -
convertTime:toLayer:将 time interval 从接收者空间转换为指定 layer 时间空间。
想要同步多个具有不同speed、timeOffset或beginTime的图层时，上述方法会非常有效。
2.1 暂停、回退和快进
动画speed被设置为零会暂停动画，但动画被添加到图层后不能修改，因此不能使用speed属性暂停运行中的动画。添加CAAnimation到 layer 时，复制一份不可变动画对象，因此修改原始动画对进行中的动画没有效果。使用animation(forKey:)可以获取进行中的动画，但不能修改获取的动画，修改该动画会导致无法预期的行为。
从图层移除进行中的动画，动画会急速返回动画之前的状态。在动画被移除前，复制 presentation layer 的属性，并赋值给 model layer，动画就会有看起来停止了的效果。
增大主window layer 的speed，可以加快整个应用动画速度，达到快进效果。设置speed为负值，可以达到回退效果。在模拟器中，勾选 Debug > Slow Animations 后可以开启慢动画，可以用于调试动画效果。
Demo名称：CoreAnimation
源码地址：https://github.com/pro648/BasicDemos-iOS/tree/master/CoreAnimation
上一篇：CAAnimation：属性动画CABasicAnimation、CAKeyframeAnimation以及过渡动画、动画组
下一篇：计时器CADisplayLink
参考资料：
欢迎更多指正：https://github.com/pro648/tips
本文地址：https://github.com/pro648/tips/blob/master/sources/图层时间CAMediaTiming.md
