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

前言

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

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

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

UIViewPropertyAnimator

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

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

Reactive animation chaining

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

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

Talk is cheap,Show me the code

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

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

自定义操作符

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

animation1 ~> animation2 ~> animation3 ~> animation4

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

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

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

总结

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

时间: 2018-12-10

IOS等待时动画效果的实现

查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果.当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView

详解iOS开发中的转场动画和组动画以及UIView封装动画

一.转场动画 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) 转场动画代码示例 1.界面搭建 2.实现代码 复制代码

iOS 进度条、加载、安装动画的简单实现

首先看一下效果图: 下面贴上代码: 控制器ViewController: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end /*** ---------------分割线--------------- ***/ #import "ViewController.h" #import "HWWaveView.h" #import "HWCircleVi

iOS 实现简单的加载等待动画示例(思路与实现)

先看下最后基本要实现的效果 总结一下自己的实现思路与所用到的类 1.这个肯定是要自定义的View类,起名为XDColorCircle吧,最后用的时候达到这样的效果 //创建XDColorCircle的实例化对象 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)]; //添加到视图上展示 [self.view addSubview:c

IOS绘制动画颜色渐变折线条

先给大家展示下效果图: 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分需要集成折线图的项目.若你

iOS实现滚动字幕的动画特效

效果图 开始上代码 滚动字幕的原理是用timer定时器间隔一定的时间来驱动scrollView上的内容偏移,来实现滚动的效果,原理比较简单,关键是有些细节需要处理好,实现流畅效果的同时要考虑到性能优化 这里是.h文件的接口方法及属性,可适应大部分自定义场景 /*初始化*/ -(instancetype)initWithFrame:(CGRect)frame textArray:(NSArray *)textArray colorArray:(NSArray *)textColorArray; /

iOS 水波纹动画的实现效果

本人最近在研究iOS动画,至于原理,我不在这里说了.毕竟这里的标题:水波纹的实现. 在这里,要学习水波纹的实现,首先要知道以下几点知识: 1.正弦函数:y = Asin(wx +b) + c.相信大家都比较熟悉. 2.CAShapeLayer的简单实用,相信看一下,就是知道其大概的用途了,形状Layer层.和用户显示图形的Layer,继承于layer,好了,废话不多说,直接上图吧. 上面的知识点,我会以代码的方式,梳理上面的知识点,不过首先我还是上传效果图吧,有图有真相,才是事实嘛. 1.效果图

IOS 圆球沿着椭圆轨迹做动画

前言:最近公司项目有个需求,需要实现让一个view沿着椭圆轨迹做动画,效果实现后,就自己封装做了一个小demo,使用更方便.先看效果: 椭圆.gif 效果图中的白色椭圆轨迹线其实是用贝塞尔曲线画出来的,为了清晰的看出来运动的轨迹.其实项目中是不显示轨迹线的,也就是小球是悬空运动的.若不需要删除掉即可. 实现步骤: 1.首先设定关键帧动画CAKeyframeAnimation的一些属性,比如运动时间和重复次数和calculationMode模式,我们选择kCAAnimationPaced 使得动画

IOS实现视频动画效果的启动图

先上效果图 实现思路 主要思路就是用一个控制器来作为播放视频的载体,然后在让这个控制器作为根视图,视频播放完成之后那就该干嘛干嘛了. 话不多说了,下面就放代码好了 先新建一个控制器AnimationViewController在控制器中新建一个属性moviePlayer,记得要先引入系统库<MediaPlayer/MediaPlayer.h> @property (nonatomic, strong) MPMoviePlayerController *moviePlayer; 设置movieP

IOS实战之自定义转场动画详解

转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动

iOS中利用CAEmitterLayer实现粒子动画详解

前言 你肯定见过很酷炫的iOS动画吧,例如微信的表情雨

Flutter实战之自定义日志打印组件详解

在Flutter中,如果我们需要打印日志,如果不进行自定义,我们只能使用自带的 print() 或者 debugPrint() 方法进行打印,但是这两种打印,日志都是默认 Info 层级的日志,很不友好,所以如果需要日志打印层级分明,我们就需要自定义一个日志打印组件,以下就来介绍如何自定义日志打印组件. 如何让输出的日志层级分明? 换种方式想,如果我们能在Flutter代码中,能够调用到原始Android中的Log组件,岂不是就能解决日志打印问题? 如何进行关联 在Flutter中,可以使用 M

iOS自定义转场动画的几种情况

前言 在开发中,无论我们使用 Push 还是 Present 推出新的 ViewController 时,系统为了提高用户体验都会为我们默认加上一些过渡动画.但是,系统默认的动画总是不能满足大家各种各样的需求的,所以系统也为我们提供了在不同场景下自定义过渡动画以及通过手势控制过渡进度的实现方案. 这篇文章记录了自定义转场动画中的几种情况: 模态跳转(Present) 导航控制器跳转(Push) UITabbarController 三方框架--Lottie 效果图 预备 首先,我们现在介绍几个在

IOS轻松几步实现自定义转场动画

一.系统提供的转场动画 目前,系统给我们提供了push/pops和present/dismiss两种控制器之间跳转方.当然,通过设置UIModalTransitionStyle属性,可以实现下面4种modal效果,相信大家都比较熟悉了,这里就不再展示效果图. UIModalTransitionStyleCoverVertical // 从下往上, UIModalTransitionStyleFlipHorizontal // 水平翻转 UIModalTransitionStyleCrossDis

IOS 开发之PickerView自定义视图的实例详解

IOS 开发之PickerView自定义视图的实例详解 例如选择国家,左边是名称右边是国家,不应该使用两列,而是自定义PickerView的一列,可以通过xib来实现. 注意,虽然PickerView也是一列,但是数据源方法是@required,所以必须实现. 因此,核心思想就是一列,自定义PickerView的行视图. 使用viewForRow方法可以设定行视图. 这样的视图可以通过xib和它的控制器进行封装: Xib的控制器继承自UIView类即可. 控制器维护一个用于设置数据的模型对象fl

IOS UIView的生命周期的实例详解

IOS UIView的生命周期的实例详解 任何对象的者有一个生命周期,即都存在一个实例化到销毁的过程. UIView对象也不例外,那么UIView从init/new开始后,直到dealloc结束的过程中都经历了哪些过程呢? 首先自定义继承自UIView的对象LifeView #import <UIKit/UIKit.h> @interface LifeView : UIView @end #import "LifeView.h" @interface LifeView ()

IOS 开发中画扇形图实例详解

IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.

iOS利用Block逆向传值的方式详解

前言 在iOS通过代理逆向传值的方式详解一文中,分析了如何利用代理模式来逆向传值,其实还有一些其他的方式,如通知.Block等,相比较代理,我个人认为反而要简单些,但是需要处理好细节问题,如Block循环引用.还是用前文的案例,本次使用Block来实现,Block的基本知识本文不再赘述. 一.书写规范 Block传值,需要注意的是,谁传值就需要定义Block,捕获方仅仅需要传递Block给传值方,并处理捕获的值. 传值方 1.定义Block用于传值 2.声明一个上述Block属性,这个属性的具体