ios - 如何动画圆弧/ donut 段行程和长度变化

Question

我需要在以下场景中制作圆弧(又名 donut 段)的动画，其中圆弧保持恒定的半径 r 到假想的圆心(圆弧位于圆的外面)。

1) 将圆弧笔划宽度从 x 设置为 y，同时保持半径 r 和角度 alpha。

2) 将圆弧角从 alpha 设置为 beta，同时保持笔划宽度和半径不变。

3) 一起执行 1 和 2，但可能使用独立的动画/计时。

这是我目前所拥有的:

我已经将圆弧绘制实现为自定义 View ，它使用 CGContextAddArc 简单地绘制圆弧。这对于静态弧很好，但它不会激活任何东西。

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

后者很有趣，因为我认为对于场景 1，我可以通过两种方式达到预期的效果:继续绘制圆弧并修改笔划和半径以保持相同的感知内圆半径(我不是乐观，我担心半径会“摇晃”)，或者绘制一个大小增加的圆段(可能通过简单地用仿射变换修改比例)然后被静态圆形蒙版剪裁。

现在，我如何将所有这些概念融入实际的绘图代码中？我不需要真正的代码(虽然那也很好)，但更像是一种概念方法，比如，我可以用带有自定义绘图的 UIView 来完成这一切吗，或者我们是否需要讨论我理解的自定义按键动画涉及 CALayers 等。换句话说，什么是正确的架构来完成所有这一切，既最容易编码，又从合成的角度来看是高效的以实现流畅的动画？

Answer 1

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

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