你如何在 iOS 中实现“时钟擦除"/径向擦除效果? [英] How do you achieve a "clock wipe"/ radial wipe effect in iOS?
问题描述
有时您会看到正在使用的时钟擦除"动画.像这样:
Sometimes you'll see a "clock wipe" animation in use. Something like this:
你将如何在 iOS 中实现这种效果?
How would you achieve that effect in iOS?
(注意:这个问题是一个铃声".我想分享一种创建时钟擦除动画的技术，但是 SO 没有用于分享教程的格式，所以我能来的最接近的是问一个问题然后提供答案.这是故意的，并试图分享其他人可能认为有用的信息.)
(Note: This question is a "ringer." I wanted to share a technique for creating a clock wipe animation, but SO does not have a format for sharing tutorials, so the closest I can come is asking a question and then providing the answer. This is deliberate, and an attempt to share information that others might find useful.)
推荐答案
答案:
您将创建 CAShapeLayer 并将其安装为视图层上的蒙版.
You'd create CAShapeLayer and install it as a mask on your view's layer.
然后，您将在形状图层中安装一个跨越整整 360 度的弧，其半径为图像中心到角距离的一半.你会给它一个与半径相同的线宽.
You'd then install an arc into the shape layer that spanned a full 360 degrees, and had a radius that was half the center-to-corner distance of your image. You'd give it a line width that was the same as the radius.
最后，您将创建一个 CABasicAnimation，该动画将形状图层的 strokeEnd 属性从 0 设置为 1.0.这将导致形状开始为空(图像完全遮罩)并将遮罩动画化为饼状切片".它变得越来越大，直到达到图像的全尺寸.
Finally, you'd create a CABasicAnimation that animates the strokeEnd property of the shape layer from 0 to 1.0. This would cause the shape to start out empty (image fully masked) and animate the mask as a "pie slice" that got bigger and bigger, until it was the full size of the image.
您可以在 github 上下载我编写的示例项目，该项目展示了此动画的工作代码以及其他核心动画技术:
You can download a sample project on github that I wrote that shows working code for this animation, among other Core Animation techniques:
好吧，这个帖子真的很老了.我试图构建示例项目，并在大约 45 分钟后放弃了与 Xcode 的斗争.对于当前项目格式，太多设置已过时.
Ok, this thread is REALLY old. I tried to get the sample project to build and gave up fighting with Xcode after about 45 minutes. Too many settings are out of date with current project formats.
时钟擦除演示需要用 Swift 重写，所以我才重新开始.
The clock wipe demo needed to be rewritten in Swift, so I just started over.
可以在此链接中找到新项目:https://github.com/DuncanMC/ClockWipeSwift
The new project can be found at this link: https://github.com/DuncanMC/ClockWipeSwift
这篇关于你如何在 iOS 中实现“时钟擦除"/径向擦除效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
