CABasicAnimation和CAKeyframeAnimation动画同步问题
背景
需要做一个扇形带指示器的进度条动画,最初实现的是如下效果

代码如下
func startAnimation() { let width = self.frame.width let bezierPath = UIBezierPath(arcCenter: CGPoint(x: width / 2, y: radius), radius: radius - trackWidth, startAngle: (1 + angle / 180) * Double.pi, endAngle: -angle / 180 * Double.pi, clockwise: true) frontFillLayer.path = bezierPath.cgPath // 扇形进度条动画 let basicAnim = CABasicAnimation(keyPath: "strokeEnd") basicAnim.duration = 2 basicAnim.fromValue = 0 basicAnim.toValue = 1 basicAnim.timingFunction = CAMediaTimingFunction(name: .easeIn) cursorView.layer.removeAnimation(forKey: "cursorKeyframeAnimation")
// 指示器动画 let keyFrameAnim = CAKeyframeAnimation(keyPath: "position") keyFrameAnim.path = bezierPath.cgPath keyFrameAnim.fillMode = .both keyFrameAnim.isRemovedOnCompletion = false keyFrameAnim.duration = 2
// keyFrameAnim.calculationMode = .paced // 加上该行代码,动画同步了 keyFrameAnim.timingFunction = CAMediaTimingFunction(name: .easeIn) frontFillLayer.add(basicAnim, forKey: nil) cursorView.layer.add(keyFrameAnim, forKey: "cursorKeyframeAnimation") }
向同事请教,最后加上keyFrameAnim.calculationMode = .paced,动画同步了。
calculationMode各属性具体含义:
| 可选属性 | 含义 |
| linear | 默认差值 |
| discrete | 逐帧显示 |
| paced | 匀速,无视keyTimes |
| cubic |
keyValue之间曲线平滑,可用tensionValues,continuityValues,biasVaules调整
|
| cubicPaced |
keyValue之间平滑差值,无视keyTimes
|
顺带说一下,如果是在UITableViewCell等可以复用的地方使用了动画,持有一下cell,才能保证reloadData之后,动画哪怕设置了anim.isRemovedOnCompletion = false,仍然会回到初始状态。
总结
总感觉苹果官方开发文档写的不好,没有demo。就是单纯把注释生成了文档。(也可能是我寻找方法不对)
浙公网安备 33010602011771号