如何动画圆弧/甜甜圈段行程和长度变化

Question

我需要在以下情况下为弧线（又名甜甜圈段）设置动画，其中弧线与假想的圆心保持恒定的半径 r（弧线正好位于圆外）。

1) 为从 x 到 y 的弧形笔划宽度设置动画，同时保持半径 r 和角度 alpha。

2) 将弧角从 alpha 变为 beta，同时保持恒定的笔划宽度和半径。

3) 一起做 1 和 2，但可能有独立的动画/计时。

这是我目前所拥有的：

我已经将圆弧绘制实现为一个自定义视图，它只需使用 CGContextAddArc 绘制圆弧。这对于静态弧来说很好，但它不会为任何东西设置动画。

另外，我知道如何使用 [UIBezierPath addClip] 之类的东西绘制剪辑图像。

后者很有趣，因为我认为对于场景 1，我可以通过两种方式达到预期的效果：要么继续绘制弧线并修改笔划和半径以保持相同的感知内圆半径（我不是看好，恐怕半径会“晃动”），或者画一段变大的圆（可能只是简单地用仿射变换修改比例），然后被静态圆形蒙版剪裁。

现在，我如何将所有这些概念纳入一些实际的绘图代码中？我不需要真正的代码（虽然那也可以），但更像是一种概念方法，比如，我可以使用带有自定义绘图的 UIView 来完成这一切，还是我们需要谈论我理解的自定义键动画涉及CALayers等。换句话说，什么是正确的架构来完成所有这些，最容易编码，同时从合成的角度来看效率高，以实现流畅的动画？

Answer 1

您应该使用 CALayer 子类上的自定义动画属性来实现这一点。 This tutorial（与来源here）用于创建动画饼图，看起来很不错。您应该能够根据您的要求对其进行修改。

Answer 2

您已经可以使用 CAShapeLayer 执行此操作，方法是为弧创建路径，然后为不同的笔划属性设置动画。您可以为整个圆创建路径，并使用 strokeStart 和 strokeEnd 属性仅描边圆的某个部分。值得注意的是，形状层是中心描边，因此当您增加线宽时，它们会向内和向外同样增加。为了解决这个问题，您可以使用相同的圆形对其进行遮罩并将线宽加倍，或者对路径进行动画处理，使半径增加线宽的一半，以便最里面的点始终与中心的距离相同.

第一个例子可以通过动画 lineWidth 属性来完成，第二个例子可以通过动画 strokeStart 和 strokeEnd 属性来完成