快速绘制带有笔划动画的复选标记

问题描述

我的 iOS 应用中有一个按钮，我想在用户点击它时应用复选标记动画，但我不知道如何实现这一点。如果有人有想法，请帮助我。 下面是我要创建的动画的示例 gif 图像。

解决方法

要创建该动画，您可以像 Matt 所说的那样为从左到右显示复选标记的蒙版设置动画，或者您可以使用 CAShapeLayer 绘制复选标记，然后为 {{1 }} 形状层的属性。

（滑动遮罩方法总是从左到右显示视图的内容¹，无论视图包含复选标记还是小猫的图片。形状图层描边方法特定于使用 strokeEnd 绘制形状（或Core Foundation 等价物，UIBezierPath)，但您可以使用它从头到尾绘制复杂的形状，甚至是自己循环的形状。它不仅限于始终从左到右显示视图内容。）

碰巧的是，您在问题中使用的图片是我上周末创建的使用 CGPath 方法的演示应用的产品。

您可以在此处找到完整的演示应用程序：

https://github.com/DuncanMC/AnimateCheckMark.git

为了制作笔触动画，您需要将复选标记创建为形状图层。创建复选标记的示例代码如下所示：

CAShapeLayer

（该代码不是很通用。它创建了一个固定大小的复选标记。您可能需要修改它以缩放复选标记以适应它所属的视图。）

创建形状图层并在其中安装复选标记后，您需要创建一个动画，为形状图层的strokeEnd 属性设置动画。 该代码可能如下所示：

private func checkmarkPath() -> CGPath {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 5,y: bounds.midY))
    path.addLine(to: CGPoint(x: 25,y: bounds.midY + 20))
    path.addLine(to: CGPoint(x: 45,y: bounds.midY - 20))
    return path.cgPath
}

整个演示应用程序可让您将复选标记动画创建为笔触动画或交叉淡入淡出，并允许您使用线性时序或缓入/缓出时序。演示应用程序的窗口如下所示：

---

¹：您可以创建其他遮罩动画，从右到左、从上到下、从中心向外等显示您的视图内容。但是，对于您问题中的复选标记动画，您需要的遮罩动画是从左到右的“擦除”动画。