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

Question

有时候你会看到使用“时钟擦拭”动画，就像这样：

如何在iOS中实现这种效果？ （注：这个问题是一个“短信”，我想分享一种创建时钟擦拭动画的技巧，但是SO没有分享教程的格式，所以我最接近的方法是问一个问题，然后提供答案。这是有意为之，旨在分享其他人可能会发现有用的信息。）

- Duncan C

---

我投票支持这个问题及其答案，感谢分享。你不必为回答自己的问题辩解，实际上在帮助部分中是受到鼓励的：http://stackoverflow.com/help/self-answer - 2Dee

@2Dee，我不应该不必解释，但很多人因为一些愚蠢的原因而对问题进行了负面评价。最好解释一下我提出问题的原因，而不是冒险引起混淆。 - Duncan C

Answer 1

答案：

您需要创建一个CAShapeLayer，并将其安装为视图层的蒙版。

然后，您会在形状图层中安装一个跨越完整360度的弧形，并且半径是图像中心到角落距离的一半。您会给它一个与半径相同的线宽。

最后，您将创建一个CABasicAnimation，该动画将从0到1.0动画形状层的strokeEnd属性。这会导致形状开始为空（图像完全被遮罩），并将遮罩动画为一个“饼图”不断变大，直到成为图像的完整大小。

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

CA Animation demo on github

---

编辑 更新Swift 5：

好的，这个帖子真的很旧了。我尝试让示例项目构建并放弃了与Xcode的战斗约45分钟。太多设置与当前的项目格式过时。

时钟擦拭演示需要用Swift重写，所以我重新开始了。

新项目可以在此链接处找到：https://github.com/DuncanMC/ClockWipeSwift

- Duncan C

---

谁给答案点了踩？我发这个问题的目的就是为了发布答案，因为SO没有教程格式。我认为时钟擦除教程对其他人会很有用，因为使用核心动画来解决这个棘手的技术问题是相当困难的。 - Duncan C

太棒了，Duncan！非常有帮助 :) 谢谢伙计。 - Taylor Abernethy Newman

@TaylorAbernethyNewman，该项目构建了一款仅适用于iPad的应用程序。这只是因为我想要屏幕空间来展示不同的动画效果。然而，将其适配到iPhone上也很容易。你只需要更改目标设备并创建iPhone和iPad特定版本的XIB文件即可。 - Duncan C

嘿，邓肯，你知道面具动画在64位上不起作用吗？有什么想法吗？ - eric

@AbhishekThapliyal 我会尝试找时间用Swift重写它。在Swift中使用Core Foundation实际上更容易，因为它会自动处理CF类型和Foundation类型之间的转换，而且你不必处理NSNumber和NSValue。 - Duncan C