如何设置弧/圆环段的行程和长度变化的动画

Question

我需要在以下场景中为弧形(也称为圆环线段)设置动画,其中弧线保持与假想圆心的恒定半径r(圆弧位于圆的正外方).

1)将弧形笔划宽度从x设置为y,同时保持半径r和角度α.

2)将弧角从α变为β,同时保持恒定的行程宽度和半径.

3)一起做1和2但可能有独立的动画/时间.

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

我已经将弧绘图实现为一个自定义视图,只需使用CGContextAddArc绘制弧.这适用于静态弧,但它不会为任何动画制作动画.

此外,我知道如何使用[UIBezierPath addClip]之类的东西绘制剪切图像.

后者很有意思,因为我认为对于场景1,我可以通过两种方式达到预期的效果:保持绘制弧线并修改笔划和半径以保持相同的感知内圈半径(我不乐观,我担心半径会"摇晃"),或绘制一个尺寸增大的圆的一段(可能只是通过仿射变换修改比例),然后用静态圆形蒙版剪裁.

现在,我如何将所有这些概念归结为一些实际的绘图代码？我不需要真正的代码(虽然那也没关系),但更像是一个概念方法,比如,我可以用自定义绘图的UIView完成所有这些,或者我们是否需要谈​​论我理解的自定义关键动画涉及CALayers等.换句话说,什么是正确的架构来完成所有这些最简单的编码,同时从合成的角度为平滑动画提高效率？

Answer 1

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

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

Answer 2

您应该使用CALayer子类上的自定义动画属性来实现此功能.本教程(源代码在这里)用于创建动画饼图,看起来非常好.您应该能够根据您的要求进行修改.