修改UIBezierPath起始角后CAAnimation动画时长异常问题咨询

问题本质 #

这个问题的核心是路径长度与描边动画进度不匹配，根源出在UIBezierPath的弧路径定义上：

• 当startAngle设为0时，endAngle=.pi*2刚好定义了一圈完整的圆弧路径（角度跨度为2π），此时strokeEnd从0动画到1，会精准在10秒内描完整个圆周，视觉表现正常。
• 但将startAngle改为-.pi/2后，若仍使用endAngle=.pi*2，实际定义的路径角度跨度为2π - (-π/2) = 2.5π，也就是1.25圈的长度（比完整圆多1/4圈）。

动画提前结束的原因 #

CAShapeLayer的strokeEnd属性是基于路径总长度的比例计算的：

• 完整一圈的长度对应路径总长度的1 / 1.25 = 0.8（即80%），因此动画执行到第8秒（10秒的80%）时，strokeEnd达到0.8，此时已经描完完整一圈，视觉上形成闭合圆。
• 剩余2秒的动画是在描额外的1/4圈，但这段路径与已画好的圆重叠，完全看不到变化，因此会误以为动画提前结束。

为什么调整toValue=0.795有效？ #

这个数值是1/1.25=0.8的近似值，设置后动画会在strokeEnd接近0.8的位置停止，刚好对应描完完整一圈的状态，视觉上就会呈现10秒完成一个圆的效果。

更合理的修复方案 #

与其通过调整toValue凑数，不如直接修正路径定义，确保它是标准的完整圆：

// 方案1：基于起始角度计算正确的结束角度，保证角度跨度为2π
let startAngle = -.pi / 2
let endAngle = startAngle + .pi * 2
let path = UIBezierPath(arcCenter: center, radius: 90, startAngle: startAngle, endAngle: endAngle, clockwise: true)

// 方案2：用椭圆路径绘制正圆（更简洁，无需计算角度）
let circleRect = CGRect(x: center.x - 90, y: center.y - 90, width: 180, height: 180)
let path = UIBezierPath(ovalIn: circleRect)

这样定义的路径是标准一圈，strokeEnd从0到1的动画会精准在10秒内完成，无需调整toValue。

内容的提问来源于stack exchange，提问作者Lena Verhoev