iOS变形播放/暂停动画

Question

我想在我正在开发的应用程序中有一个类似 YouTube 的变形播放/暂停动画。好像动画here .我不知道该怎么做。我知道我需要一个 CABasicAnimation 和 CAShapeLayer。我知道我需要两个(或者更多？)UIBezierPath-s。一个是 shapeLayer 的路径，另一个是动画的 toValue。像这样的东西:

shape.path = pausePath().cgPath

let animation = CABasicAnimation(keyPath: "path")
animation.toValue = trainglePath().cgPath
animation.duration = 1
shape.add(animation, forKey: animation.keyPath)

但我不确定如何走这些路。我有以下问题:

1. 路径的形成方式重要吗？例如，一条从左到右画的线是否会与一条从右到左画的线动画不同？我的意思是像 path.move(to: startPoint); path.addLine(to: endPoint1) 相对于 path.move(to: endPoint1); path.addLine(to: startPoint)
2. 两条路够吗？一个用于开始按钮，一个用于暂停按钮？如果是 - 绘制它们以使它们“正确”动画的正确方法是什么？我在这里不要求提供代码(并不是说我介意将代码作为答案)，但对于初学者来说，一些一般性的解释就足够了。

Answer 1

让路径动画起作用的关键是开始路径和结束路径都具有相同数量的控制点。如果你看那个动画，在我看来，最初的“播放”三角形被绘制为 2 个相互接触的封闭四边形，其中右四边形有 2 个点在一起，所以它看起来像一个三角形。然后动画将这些四边形的控制点分开，并将它们都变成暂停符号的矩形。

如果您将其绘制在方格纸上，则应该很容易创建前后控制点。

考虑下面的(非常粗略的)插图。顶部显示“播放”三角形分成 2 个四边形，右侧部分(黄色)显示为四边形，右侧的点稍微分开以显示想法。在实践中，您会设置该四边形，其中两个控制点具有完全相同的坐标。

我用数字标记了每个四边形的控制点以显示绘制它们的顺序(对于每个四边形:移动到第一个点，线到第二/第三/第四点，最后是线到第一个点，以关闭多边形。 )

底部的插图显示了为给出暂停符号而移动的点。

如果您创建一个 CAShapeLayer 的 CABasicAnimation，从控制点(如上图)开始，到控制点(如底部图)结束，您应该得到一个与您链接到的动画非常相似的动画。

我刚刚创建了一个演示程序，它创建了一个像我描述的那样的动画。这是它的样子:

我用黑色描边路径并用青色填充它们，这样更容易看出发生了什么。

(那比我手绘的<grin>还要完成一点。)

您可以在 this Github link 查看生成该动画的项目。 .