ios - 移动尾部动画

Question

我想做一个有动线的动画，类似于狗摇尾部。

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

有什么想法吗？

Answer 1

这不会那么难。是的，使用 CAShapeLayer 动画是可行的方法。

我会把图像不变的部分做成位图，然后在上面绘制你的形状图层动画。

形状层动画的诀窍是您使用的形状需要为动画的所有部分具有相同数量的控制点。

对于尾部动画，您应该能够将其映射为一组二次贝塞尔曲线。您可以将尾部绘制为带有圆形端盖的单一粗路径。 (kCGLineCapRound)。您将使起始曲线成为二次贝塞尔曲线，起点在尾部直线部分的起点下方，下一个控制点略微向右并在弯曲尖端下方，下一个控制点在上方和左侧第一个控制点的位置，但仍在尖端的下方和右侧，最后一个控制点位于尖端。

结束曲线的第一个控制点位于尾部底部的同一位置，第二个控制点位于曲线顶部和左侧，下一个控制点位于曲线上方约 2/基点和尖端之间的路径3，最后一个点在尾尖。

您可能想尝试使用 Adob​​e Photoshop(或 GIMP)中的路径工具，并使用它使用单个二次贝塞尔曲线创建开始和结束的尾部曲线形状，然后记下您使用的控制点位置并输入将它们添加到您的代码中。

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

我有一个名为 RandomBlobs 的项目(链接)在 Github 上展示了如何使用 CGPath 和 CABasicAnimation 为曲线设置动画，但它是用 Objective-C 编写的，而不是使用二次贝塞尔曲线，它创建了另一种称为 Catmull-Rom 样条的曲线。然而，二次贝塞尔曲线实际上比 Catcall-Rom 样条曲线更容易设置，并且使用 CABasicAnimation 对 CAShapeLayer 进行动画更改背后的想法应该很容易从 Objective 转换-C 到 Swift 如果你以前使用过 CAShapelayers。您还可以使用一系列 Catmull-Rom 样条曲线来获得您想要的尾部动画。 Catmull-Rom样条的优点是所有的控制点都在曲线上。