移动尾巴动画

Posted 2023-03-12

【中文标题】移动尾巴动画

【英文标题】：Moving Tail Animation

【发布时间】：2016-04-22 15:51:34

【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

章鱼是一个ImageView？

@khuong291 是的，现在是imageView。例如，我可以将其设为 2 个imageView，将主体单独作为，将尾部作为单独的imageView。此外，使用 PaintCode，这可以使用 Core Graphics 绘制。不确定制作此动画需要什么。有什么建议可以完成这项工作吗？

您可以在 Photoshop 中设计图像并使用图像视图按顺序为这些图像设置动画。

我推荐你使用 gif 图片。只需上传此 gif 图片即可。

我不知道，因为在这种情况下使用代码非常复杂：D

【参考方案1】：

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

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

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

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

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

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

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

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