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

我需要其中电弧维持恒定的半径r的假想圆中心进行动画在下列情况下的弧（又名甜甜圈段）（弧位于在圈子外面）。

1）将圆弧笔画宽度从x移动到y，同时保持半径r和角度α。

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

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

这是我到目前为止有：

我已经实现了圆弧绘制为简单的绘制与CGContextAddArc弧自定义视图。这对于静态弧线来说很好，但它不会动画。

此外，我知道如何绘制像[UIBezierPath addClip]这样的剪辑图像。

后者很有趣，因为我认为对于情景1，我可以通过两种方式实现预期效果：或者不断绘制圆弧并修改笔画和半径以保持相同的感知内圆半径（即我不要乐观，恐怕半径会“抖动”），或者绘制一个尺寸增大的圆的一部分（也许通过简单地用仿射变换修改该尺度），然后用静态圆形遮罩来裁剪。

现在，我如何理解所有这些概念，并将它们归纳为一些实际的绘图代码？我不需要真正的代码（虽然这也可以），但更像是一个概念性的方法，我可以用一个带有自定义绘图的UIView来完成这一切，还是我们需要谈论我自己理解的自定义关键动画涉及CALayers等。换句话说，什么是正确的架构来完成所有这些，从合成的角度来看，对于流畅的动画来说，最简单的代码是有效的？

来源

2012-06-07 Jaanus

您可以使用CAShapeLayer创建弧的路径，然后为不同的笔触属性设置动画。您可以创建完整圆的路径，并使用strokeStart和strokeEnd属性仅触发圆的某个部分。值得注意的是，形状图层位于中心，因此当您增加线条宽度时，它们会同样向内和向外增加。为了解决这个问题，你可以用相同的圆形掩盖它并加倍线宽或者为路径设置动画，以使半径增加线宽增加的一半，使得最内部的点始终与中心具有相同的距离。

第一个例子可通过动画线宽属性进行，并且所述第二可通过动画化strokeStart和strokeEnd性质

来源

2012-06-07 06:43:49

+1，这会让我链接到的教程简单得多！ – jrturton

谢谢。我通过添加CAShapeLayer作为我的自定义UIView的子图层，然后使用CABasicAnimation按照您的建议动画化它的属性，从而完成了我想要的任务。对于甜甜圈孔，我添加了一个图层蒙版。 – Jaanus

嘿！我试图完成同样的事情，并且很高兴看到一些代码......我试图实现David的建议，但是我无法为“strokeEnd”设置动画...以下是我拥有的：https ：//gist.github.com/4073608 – Eric

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

来源

2012-06-07 06:26:06 jrturton

酷教程来完成。感谢您链接它。我不知道有可能创建像这样的自定义动画属性。 –

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

回答

相关问题