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。就是单纯把注释生成了文档。(也可能是我寻找方法不对)

 

posted @ 2023-07-08 11:10  夏风已过  阅读(74)  评论(0)    收藏  举报