你如何在iOS中实现"时钟擦除"/径向擦除效果？

Question

有时您会看到正在使用的"时钟擦除"动画.像这样的东西:

你会如何在iOS中实现这种效果？

(注意:这个问题是一个"振铃器".我想分享一种创建时钟擦除动画的技术,但是SO没有共享教程的格式,所以我最接近的是问一个问题,然后提供答案这是故意的,并试图分享其他人可能觉得有用的信息.)

Answer 1

回答:

您将创建CAShapeLayer并将其作为掩码安装在视图的图层上.

然后,您将弧形安装到跨越整个360度的形状图层中,并且半径为图像中心到角落距离的一半.你给它一个与半径相同的线宽.

最后,您将创建一个CABasicAnimation,它将形状图层的strokeEnd属性设置为0到1.0.这将导致形状开始为空(图像完全蒙版)并将蒙版动画化为"饼图",其变得越来越大,直到它是图像的完整大小.

您可以在我编写的github上下载示例项目,该项目显示了此动画的工作代码,以及其他Core Animation技术:

github上的CA Animation演示