ios - 移动尾巴动画

Question

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

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

有任何想法吗？

Answer 1

这不会那么难。是的，使用CAShapeLayer动画将是要走的路。

我会将图像的不变部分制作为位图，然后在顶部绘制形状图层动画。

形状图层动画的诀窍在于，您使用的形状需要对动画的所有部分具有相同数量的控制点。

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

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

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

您将创建一个CABasicAnimation将CAShapeLayerfromValue 设置为起始 CGPath 并将 toValue 设置为结束 CGPath 的位置。只需确保起始路径和结束路径具有相同数量的控制点。

我在 Github 上有一个名为RandomBlobs (link) 的项目，它展示了如何使用CGPaths 和CABasicAnimations 为曲线制作动画，但它是用 Objective-C 编写的，它没有使用二次贝塞尔曲线，而是创建了另一种称为 Catmull 的曲线-Rom样条。然而，二次贝塞尔曲线实际上比 Catcall-Rom 样条曲线更容易设置，并且如果您以前使用过s，那么将动画更改为CAShapeLayerusing背后的想法CABasicAnimation应该很容易从 Objective-C 转换为 Swift 。CAShapelayer您还可以使用一系列 Catmull-Rom 样条来获得您所追求的尾巴动画。Catmull-Rom 样条的优点是所有控制点都在曲线上。