移动尾巴动画

Question

我想用移动的线条制作一个动画，类似于尾巴的狗。

我不知道如何开始。我之前使用Core Animation的CAShapeLayer作为进度条，但不知道它是否适用于此。过去，我还使用PaintCode来帮助定制路径，例如为要创建对象的自定义UIBezierPath进行动画处理。但也不确定PaintCode是否会对此有所帮助。

任何想法？

Answer 1

这不会是那么难。是的，使用动画将是一条可行的路线。

我会使图像的非变化部分成位图，然后绘制在上面的形状图层的动画。

与形状图层动画的技巧是，你需要使用的形状有相同数量的控制点动画的所有部分。

在你的尾巴动画的情况下，你应该能够把它绘制出一组二次贝塞尔曲线。您可能可以将尾巴画成带有圆形端盖的单一厚路径。 （kCGLineCapRound）。您将使起始曲线成为二次贝塞尔曲线，起点位于尾部直线部分的起点下方，下一个控制点稍微靠右，位于曲线尖端下方，下一个控制点位于上方和左方第一个控制点的位置，但仍然位于尖端的右侧，尖端的最后一个控制点。

结束曲线将有第一个控制点位于尾部的相同位置，第二个控制点位于曲线顶部左侧，曲线上方的下一个控制点以及大约2/3在基点和尖端之间的方式，以及在尾部尖端的最后一点。

您可能想要使用Adobe Photoshop（或GIMP）中的路径工具进行操作，并使用它来使用单个二次贝塞尔曲线创建开始和结束尾部曲线形状，然后记下您使用的控制点位置以及将它们输入到您的代码中。

您会创建CAShapeLayer的CABasicAnimation，其中您将fromValue设置为起始CGPath，将toValue设置为结束CGPath。只要确保开始和结束路径具有相同数量的控制点。

我有一个在Github上称为RandomBlobs（链接）项目，该项目显示了如何动画使用CGPath S和CABasicAnimation秒的曲线，但它是用Objective-C，而不是使用二次贝塞尔曲线，它创造了另一种称为Catmull-Rom样条曲线。二次Bezier曲线实际上更加简单设置比嘘声-ROM样条然而，后面使用CABasicAnimation应该很容易从Objective-C的斯威夫特翻译，如果你已经有CAShapelayer年代以前工作过动画变为CAShapeLayer的想法。您也可以使用一系列Catmull-Rom样条曲线获取您之后的尾部动画。 Catmull-Rom样条曲线的优点是所有的控制点都在曲线上。