欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS如何优雅地实现序列动画详解

程序员文章站 2022-06-30 11:33:12
前言 我们的在做动效中经常会有这样的需求,a动画执行完,执行b动画,b动画执行完执行c动画这样的序列,比如如下效果: ios 10之前,我们可能这样实现这个动画...

前言

我们的在做动效中经常会有这样的需求,a动画执行完,执行b动画,b动画执行完执行c动画这样的序列,比如如下效果:

iOS如何优雅地实现序列动画详解

ios 10之前,我们可能这样实现这个动画序列,实际上可能你现在的代码就是这样写的:

iOS如何优雅地实现序列动画详解

uiview.animate()提供了一个完成block回调,我们可以用它来触发下一个动画。这样做,我们可以实现这个动画。正如你可以看到的,这坨代码的主要缺点是丑陋,几乎没有可读性。

uiviewpropertyanimator

ios10引入了uiviewpropertyanimator ,基于篇幅原因,这里不对其做详细介绍,如果需要读者请自行补脑。我关心的是如何提高这类多层嵌套代码的可读性,通过uiviewpropertyanimator,前面的代码片断将成为:

iOS如何优雅地实现序列动画详解

通过上面的方式我们可以将动画定义分离开来,这样不仅有更好的可读性,还可以解耦。这样已经比开始的代码漂亮多了,但是我们还可以写的更好...

reactive animation chaining

我是一个rx的重度用户,我首先想到的是:是否有办法让uiviewpropertyanimation与rxswift兼容?

大概思路是观察一个动画的状态,然后触发下一个,接下来我们通过扩展uiviewpropertyanimation来实现 扩展会有封装uiviewpropertyanimator的“startanimation”和“addcompletion”机制。它将返回的可观察的状态。但是为了简单起见,我们假定一个动画只能“complete”,没有“stream”管理(如onnext、onsubscribed ondisposed等等)。

talk is cheap,show me the code

iOS如何优雅地实现序列动画详解

上面动画扩展返回一个 completable状态 ,订阅时,将开始动画和添加完成回调,发送一个“.completed”事件。目的很简单:当完成动画,开始执行下一个开始动画,代码如下。

iOS如何优雅地实现序列动画详解

按理说写到这里应该结束了,但是可能有读者说,我们并没有引入rx,没错你的代码很优雅,然而对我们来说成本有点高,那么就继续讲讲其他的方案,总有一款适合你。

自定义操作符

我们都知道swift有很cool的特性:自定义操作符,我们总希望把代码些简单,让别的同事看自己的代码时一目了然,都不需注释就懂什么意思,比如:

animation1 ~> animation2 ~> animation3 ~> animation4

很简单,自定义~>操作符如下:

iOS如何优雅地实现序列动画详解

接下来使用这个操作符实现动画

iOS如何优雅地实现序列动画详解

好了,自此关于如何避免写出丑陋的嵌套动画代码写完了,enjoy

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。