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

Posted 2023-02-23

【中文标题】你如何在 iOS 中实现“时钟擦除”/径向擦除效果？

【英文标题】：How do you achieve a "clock wipe"/ radial wipe effect in iOS?

【发布时间】：2014-03-14 15:24:29

【问题描述】：

有时您会看到正在使用的“时钟擦除”动画。像这样的：

你将如何在 ios 中实现这种效果？

（注意：这个问题是一个“铃声”。我想分享一种创建时钟擦除动画的技术，但 SO 没有分享教程的格式，所以我能来的最接近的就是问一个问题，然后提供答案。这是故意的，并试图分享其他人可能认为有用的信息。）

【问题讨论】：

我对这个问题及其答案投了赞成票，感谢分享。您不必证明自己的问题是合理的，实际上在帮助部分中鼓励您这样做：***.com/help/self-answer

@2Dee，我不应该必须证明，但很多人出于愚蠢的原因拒绝投票。最好解释一下我问这个问题的原因，而不是冒着混淆的风险。

【参考方案1】：

答案：

您将创建 CAShapeLayer 并将其作为蒙版安装在您的视图层上。

然后，您需要在形状图层中安装一条弧线，该弧线横跨 360 度，半径为图像中心到角距离的一半。你会给它一个与半径相同的线宽。

最后，您将创建一个 CABasicAnimation，将形状图层的 strokeEnd 属性从 0 设置为 1.0。这将导致形状开始为空（图像完全被蒙版）并将蒙版动画化为一个越来越大的“饼片”，直到它成为图像的完整尺寸。

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

CA Animation demo on github

---

Swift 5 的编辑更新：

好的，这个帖子真的很老了。我试图构建示例项目并在大约 45 分钟后放弃了与 Xcode 的斗争。太多设置与当前项目格式不符。

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

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

【讨论】：

谁对答案投了反对票？当然，我专门发布了这个问题来发布答案，因为 SO 没有教程格式。我认为时钟擦除教程对其他人有用，因为这是使用 Core Animation 弄清楚的一种非常棘手的技术。

邓肯的帖子太棒了！很有帮助:) 谢谢队友

嘿邓肯，我在设备上工作时遇到问题。运行 iOS7.1 的 iPhone 5s，操作系统是否有可能影响 CAAnimation 的更改或其他内容？

@TaylorAbernethyNewman，该项目构建了一个仅限 iPad 的应用程序。那只是因为我想要它所做的不同动画的屏幕空间。然而，让它在 iPhone 上运行是微不足道的。您只需要更改目标设备并创建 iPhone 和 iPad 特定版本的 XIB 文件。

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