9

草图

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

1) 对从 x 到 y 的弧形笔划宽度进行动画处理，同时保持半径 r 和角度 alpha。

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

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

这是我到目前为止所拥有的：

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

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

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

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

4

2 回答 2

7

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

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

于 2012-06-07T06:43:49.287 回答
6

您应该使用 CALayer 子类上的自定义动画属性来实现这一点。本教程（此处提供源代码）用于创建动画饼图，看起来不错。您应该能够根据您的要求对其进行修改。

于 2012-06-07T06:26:06.940 回答