使用UIView层动画实现属性渐变效果

UIView层动画技术是iOS动画开发中比较上层的API,其封装性较强。在使用时,开发者只需要调用UIView的类方法,将需要进行的动画操作作为闭包参数传入即可。UIView层动画主要用于视图控件的属性过渡或视图切换,例如位置的移动、尺寸的渐变、透明度的渐变、背景色的渐变以及两个视图间的切换过渡动画等。

UIView层的属性过渡动画

所谓属性过渡动画,是指当视图控件的某些属性发生改变时,将改变过程以渐变的动画效果展现出来。首先在控制器中添加一个UIView视图属性animationView,将这个视图作为执行动画的载体,示例代码如下:

为了便于看到动画执行的效果,在控制器中实现如下方法:

该方法在用户点击视图控制器的界面时会被调用。

UIView类中封装的属性过渡动画方法主要有4个,其中最简单的实现方式如下:

上面示例代码中使用了UIView中的animate(withDuration: , animations: )方法。它需要两个参数:第1个参数为动画要执行的时长,第2个参数为要执行动画的过渡属性闭包。在这个闭包中,开发者需将要展示过渡动画的属性修改代码编写进去。如上代码所示,animationView视图的背景色会在1秒内由红色过渡到蓝色。

UIView类中定义了另一个属性过渡动画方法,其可以让开发者在动画完成之后继续执行一些操作,通过这个方法,开发者可以十分方便地实现动画的嵌套执行,示例如下:

运行工程并点击屏幕,可以看到animationView首先执行了背景色的过渡动画,之后进行了位置平移动画。通过这个方法,开发者可以十分容易地实现组合动画效果。

UIView层的第三个属性过渡动画方法除了可以完成以上功能外,还可以进行动画参数与延时的配置,示例如下:

上面示例代码的意义是,设置动画的执行时间为1秒,延时2秒后开始执行,将动画设置为循环执行,即当第一次动画执行结束后,会马上从原始状态开始执行第二次动画。UIView层动画的options参数可以配置为一个数组,其中可以定义多个参数配置。UIViewAnimationOptions为一个结构体,其中定义了许多动画配置参数的静态属性,列举如下:

UIView层的属性过渡动画十分强大,其基本可以满足一般应用开发中的所有过渡效果,上面的代码只演示了背景色与位置的过渡动画,UIView层属性过渡动画支持的所有属性如下:

其中contentStretch属性动画不太常用,只有在UIImageView控件中可能会用到,其他属性动画都十分常见。

在iOS 7.0版本之后,UIView类中添加了创建阻尼动画的方法,有了这个方法,开发者可以方便地创建出类似弹簧效果的炫酷动画,示例如下:

animate(withDuration: , delay: , usingSpringWithDamping:, initialSpringVelocity: , options: , animations: , completion: )方法中有两个参数比较特殊,usingSpringWithDamping参数设置阻尼系数,其取值范围为0~1之间,1表示无弹回效果,0表示剧烈回弹效果;initialSpringVelocity参数设置初始速度,取值范围也是0~1之间。

UIView层的转场动画

属性过渡动画通常用于视图属性的改变而视图本身没有切换的场景,而转场动画通常用于视图间切换的场景,或者视图本身没有切换但视图上整体内容进行了切换的场景,这会给用户以视图切换效果的错觉。

同样,在控制器中添加一个UIView视图属性animationView,将这个视图作为执行动画的载体,示例代码如下:

实现touchesBegan()测试方法如下:

UIView类的transition(_: , duration: , options: , animations: , completion: )方法用于重构视图,其中第1个参数为要展现动画的视图;第2个参数设置动画执行的时间;第3个参数设置动画的转场效果;第4个参数是一个闭包,其可以编写转场后要执行的代码,一般与视图的修改有关;最后一个参数为动画完成后的回调闭包。这个方法并不会切换掉原视图,只是在原视图上做一个动画效果而已,开发者可以将视图要改变的部分代码写在animations闭包中。当然,如果animations闭包中什么都不写,视图依然会执行转场动画,只是转场后的视图与原视图表现一致。重构视图时的转场动画如下图所示:

transition(_: , duration: , options: , animations: , completion: )方法在做阅读类软件时作用很大,很多情况下,用户对书籍的翻页操作并没有真正切换视图控制器,也没有切换视图,只是将当前视图上展示的内容进行了更换,这种场景使用转场动画将十分方便。

UIView类中还提供了另外一个用于真正切换视图的转场动画方法,示例如下:

UIView的类方法transition(from: , to: , duration: , options: , completion: ) 需要两个视图控件作为参数,from参数为被切换的视图,to参数为切换的目标视图,duration参数设置动画执行的时间,options参数设置转场动画的效果,completion参数设置动画执行完成后要执行的操作。需要注意,这个方法的实质是将原始图控件从父视图上移除,而将新的视图控件添加到原控件的父视图上,其动画效果实际上作用在父视图上,这个方法可以直接切换整个视图控件,对于变化较大或者是完全无关联的两种视图的内容切换,这个方法十分受用。运行工程,点击设备屏幕后,效果如下图所示。

猜你喜欢

转载自blog.csdn.net/Alexander_Wei/article/details/77989096