这是 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)
}
效果如下:
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)
}
效果如下:
1.4 fillMode
fillMode
属性可以管理动画开始、结束时的表现。
1.4.1 removed
fillMode
默认值为CAMediaTimingFillMode.removed
。如果设置了beginTime
,动画从beginTime
开始;如果没有设置,则立即开始。动画结束后移除动画。
1.4.2 backwards
无论是否立即执行动画,CAMediaTimingFillMode.backwards
都会展示动画的第一帧。
1.4.3 forwards
CAMediaTimingFillMode.forwards
像往常一样播放动画,但将动画的最后一帧保留到屏幕上,直到你移除动画。
1.4.4 both
CAMediaTimingFillMode.both
是forwards
和backwards
的组合,即立即显示动画的第一帧,动画结束后保留最后一帧。
如果想保留上一部分动画结束状态,可以设置动画为
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