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

邓肯

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

在此处输入图片说明

您将如何在iOS中达到这种效果?

(注意:这个问题是个“麻烦”。我想分享一种创建时钟擦除动画的技术,但是SO没有分享教程的格式,所以我能问到的最接近的问题是问题,然后提供答案。这是有意的,是尝试共享他人可能认为有用的信息。)

邓肯

回答:

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

然后,您将在整个360度范围内的形状图层中安装一条弧,其半径是图像中心到角落的距离的一半。您可以为其设置与半径相同的线宽。

最后,您将创建一个CABasicAnimation,该动画将形状图层的strokeEnd属性设置为从0到1.0。这将导致形状开始为空(图像完全被蒙版),并将蒙版动画化为越来越大的“饼图切片”,直到达到图像的整个大小为止。

您可以在我写的github上下载一个示例项目,其中显示了该动画的工作代码以及其他核心动画技术:

github上的CA Animation演示


Swift 5的EDIT更新:

好的,这个线程真的很旧。我试图建立示例项目,并在大约45分钟后放弃了与Xcode的战斗。当前项目格式的设置太多了。

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

可以在以下链接中找到新项目:https : //github.com/DuncanMC/ClockWipeSwift

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章