iOS UIKit环形旋转动画尾部完全收缩跳转问题如何修复

问题原因 #

当前动画跳变的核心原因是动画组循环时strokeStart、strokeEnd的起止值没有衔接：单轮动画结束时strokeStart为0.93、strokeEnd为1，二者差值为0.07；下一轮循环启动时两个属性直接跳回初始值0，导致环形瞬间消失再重新绘制，出现跳变。

修复方案 #

调整stroke动画的起止值，保证动画全程strokeEnd - strokeStart ≥ 固定最小长度，且单轮动画结束时的差值等于下一轮启动时的差值，配合旋转动画即可实现无缝循环，不会出现环形完全消失的情况。

修改后的核心代码 #

只需替换你的updateAnimation方法即可：

private func updateAnimation() {
    // 最小环形长度，可自行调整，数值越大环形最小状态越宽
    let minStrokeLength: CGFloat = 0.07
    
    let strokeStartAnimation: CABasicAnimation = CABasicAnimation(keyPath: "strokeStart")
    strokeStartAnimation.beginTime = 0.5
    strokeStartAnimation.fromValue = 0
    strokeStartAnimation.toValue = 1 - minStrokeLength
    strokeStartAnimation.duration = 3.0
    strokeStartAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
    
    let strokeEndAnimation: CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
    strokeEndAnimation.fromValue = minStrokeLength
    strokeEndAnimation.toValue = 1.0
    strokeEndAnimation.duration = 3.0
    strokeEndAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
    
    let colorAnimation = CABasicAnimation(keyPath: "strokeColor")
    colorAnimation.fromValue = UIColor.systemBlue.cgColor
    colorAnimation.toValue = UIColor.systemRed.cgColor
    colorAnimation.duration = 3.5
    
    let strokeAnimationGroup: CAAnimationGroup = CAAnimationGroup()
    strokeAnimationGroup.duration = 3.5
    strokeAnimationGroup.repeatCount = Float.infinity
    strokeAnimationGroup.fillMode = .forwards
    strokeAnimationGroup.isRemovedOnCompletion = false
    strokeAnimationGroup.animations = [strokeStartAnimation, strokeEndAnimation, colorAnimation]
    
    circleLayer.add(strokeAnimationGroup, forKey: nil)
    circleLayer.add(rotationAnimation, forKey: "rotation")
}

修改说明 #

• 将strokeEnd的起始值设为最小环形长度minStrokeLength，保证动画启动时就不会出现空环形
• 调整strokeEnd的时长和strokeStart对齐，保证全程strokeEnd始终比strokeStart大至少minStrokeLength，尾部永远不会追上头部
• 可自行修改minStrokeLength的数值调整环形的最小宽度，和原来的0.93对应即可保持你之前的效果

内容的提问来源于stack exchange，提问作者Simon McNeil