iOS UIView动画实践（一）揭开Animation的神秘面纱

前言

在一个看脸的社会中，不论什么事物，长得好看老是能多吸引一些目光。App一样不例外，一款面相不错的App就算功能已经被轮子千百遍，依然会有人买帐，理由就是看得顺眼，因而平面设计人员愈来愈被重视。白驹过隙，斗转星移，人们已然不知足于静态的美感，因而动态的用户体验应运而生，平面设计人员捉襟见肘，是咱们程序员出马的时候了。

这篇文章是UIView Animation的第一篇，从极简的概念开始，为你们揭开Animation的神秘面纱。咱们以一个登陆界面为例。美丽的太阳，婀娜的云，还有几个小山包，中间静躺着用户名、密码输入框和登陆按钮。搁之前，这个界面许是会亮瞎眼现现在尼玛狗都嫌。因此咱们的目标是赋予这个界面生命力。

 

注意：本文章基于Swift 2.0和Xcode 7 Beta 2编写。登陆界面中的全部元素都已经链接到了代码中（outlet），在这个示例中咱们先不使用Auto Layout和SizeClasses。

会动的输入框

咱们的第一个场景应该是这样。用户打开App，启动画面事后显示登陆界面，此时屏幕上尚未用户名和密码的输入框，下一秒他们从屏幕左侧飘然而至。

首先

咱们须要在登陆界面尚未展示给用户的时候把用户名和密码的输入框移至屏幕外面。打开ViewController.swift，在viewWillAppear()方法中添加如下代码：

[cpp] view plaincopy

1. self.username.center.x -= self.view.bounds.width  

2. self.password.center.x -= self.view.bounds.width  

这两行代码使用户名、密码输入框移出屏幕外，这里可使用简单暴力的方式，直接让center的x减去屏幕宽度。

而后

咱们在viewDidAppear()方法中添加如下代码：

[cpp] view plaincopy

1. UIView.animateWithDuration(0.5, animations: {  

2.     self.username.center.x += self.view.bounds.width  

3.     self.password.center.x += self.view.bounds.width  

4. })  

animationWithDuration(_:animations:)是UIView的类方法，从方法名就能够看出，该方法可以使UIView动起来。它有两个参数：

• duration：动画的持续时间。

• animation：动画闭包，在这个闭包中你能够改变UIView的各类动画属性。

由于该方法是一个类方法，因此在闭包中你能够同时改变多个views的动画属性。因此在上述代码中，同时改变了用户名和密码输入框的位置。编译运行，咱们能够看到以下效果：

                                        

可是因为两个输入框是同时从屏幕外滑入，略显呆板，因此咱们用另外一个方法再来润色一下。

最后

咱们更新viewDidAppear()中的代码：

[cpp] view plaincopy

1. UIView.animateWithDuration(0.5, animations: {  

2.     self.username.center.x += self.view.bounds.width  

3. //  self.password.center.x += self.view.bounds.width  

4. })  

5.           

6. UIView.animateWithDuration(0.5, delay: 0.3, options: .AllowUserInteraction, animations: {  

7.     self.password.center.x += self.view.bounds.width  

8. }, completion: nil)  

animationWithDuration(_:delay:options:animations:completion:)方法一样是UIView的类方法，可是多了3个参数：

• delay：顾名思义，动画迟延执行的时间。

• options：自定义动画的一些效果，好比重复动画、先后运动等。这个参数在后面的文章中会说明。

• completion：也是一个闭包，当动画执行完以后会执行该闭包中的逻辑，能够用来链接动画，或者是在动画结束后你须要作一些清理工做等。

如今编译运行，能够看到以下效果：

                                         

用户名输入框先滑入屏幕，在0.3秒的延迟后，密码输入框紧随其后。

动画属性

在上一节，咱们体验了视图的简单动画效果，不难发现，其实真正致使视图动起来的是animations闭包中的代码，也就是对视图属性的改变，而后UIView的类方法生成了视图某属性的起始值和终止值之间的补间动画。这引出了另外一个概念，那就是视图的动画属性，诚然不是全部的视图属性都是动画属性，下面给你们介绍一下视图的动画属性。

位置和大小

• bounds：改变视图内容的位置和尺寸大小的属性。

• frame：改变视图的位置和尺寸大小的属性。

• center：改变视图位置的属性。

外观

• backgroundColor：改变背景色时，UIKit会线性的从原始颜色转变为目标颜色。

• alpha：改变透明度，UIKit会建立淡入淡出的效果。

转换

transform属性的类型为CGAffineTransform，它是一个结构体，CoreGraphics中有若干方法可生成不一样的CGAffineTransform结构，使视图旋转、按比例缩放、翻转等，咱们来看看它如何使用。在viewDidAppear()方法中添加以下代码：

[cpp] view plaincopy

1. let rotation = CGAffineTransformMakeRotation(CGFloat(M_PI))  

2. UIView.animateWithDuration(1, animations: {  

3.     self.sun.transform = rotation  

4. })  

首先建立了一个旋转的结构，参数是一个CGFloat类型的角度，这里咱们使用预约义好的常量好比M_PI表明3.14...，也就是旋转一周、M_PI_2表明1.57...，也就是旋转半周等。

而后在animations闭包中将建立的旋转结构赋值给屏幕上太阳视图的transform属性。编译运行能够看到以下效果：

                                        

咱们再来看看缩放，在viewDidAppear()方法中添加以下代码：

[cpp] view plaincopy

1. let scale = CGAffineTransformMakeScale(0.5, 0.5)         

2. UIView.animateWithDuration(1, animations: {  

3.     self.cloudBig.transform = scale  

4. })  

首先建立了一个缩放的结构，第一个参数是x轴的缩放比例，第二个参数是y轴的缩放比例。一样在animations闭包中将建立的缩放结构赋值给屏幕上云朵视图的transform属性。编译运行能够看到以下效果：

动画选项

你们应该还记得咱们以前使用过animationWithDuration(_:delay:options:animations:completion:)方法，其中的options当时没有详细的讲述，这节会向你们说明该属性。options选项可使你自定义让UIKit如何建立你的动画。该属性须要一个或多个UIAnimationOptions枚举类型，让咱们来看看都有哪些动画选项吧。

重复类

• .Repeat：该属性可使你的动画永远重复的运行。

• .Autoreverse：该属性可使你的动画当运行结束后按照相反的行为继续运行回去。该属性只能和.Repeat属性组合使用。

咱们来看看怎么使用这两个属性，咱们修改一个密码输入框的动画：

[cpp] view plaincopy

1. UIView.animateWithDuration(0.5, delay: 0.3, options: .Repeat, animations: {  

2.     self.password.center.x += self.view.bounds.width  

3. }, completion: nil)  

编译运行看看效果：

                                        

能够看到密码输入框不停的从左向右滑入。你们能够本身试试.Autoreverse的效果或者[.Repeat, .Autoreverse]组合效果。

动画缓冲

在现实生活中，几乎没有什么东西能够忽然开始运动，而后忽然中止一动不动。能够运动的物体基本都是以较慢的速度启动，逐渐加速，达到一个稳定的速度，而后当要中止时，会逐渐减速，最后中止。因此要使动画更加逼真，也能够采用这种方式，那就是ease-in和ease-out。

• .CurveLinear ：该属性既不会使动画加速也不会使动画减速，只是作以线性运动。

• .CurveEaseIn：该属性使动画在开始时加速运行。

• .CurveEaseOut：该属性使动画在结束时减速运行。

• .CurveEaseInOut：该属性结合了上述两种状况，使动画在开始时加速，在结束时减速。

下面依然以密码输入框做为示例，修改密码输入框的动画代码：

[cpp] view plaincopy

1. UIView.animateWithDuration(0.5, delay: 0.3, options: [.Repeat, .Autoreverse, .CurveEaseOut], animations: {  

2.     self.password.center.x += self.view.bounds.width  

3. }, completion: nil)  

上面的代码中组合了三种动画选项，首先让动画重复执行，而后让动画在一次执行完毕后接着反方向再次执行，最后让动画在结束时减速。编译运行，此次咱们减慢动画的运行速度来看看：

                                        

从上面的效果中能够看到当密码输入框滑入屏幕的后半段时速度有明显的减慢。你们也能够在本身的项目中试试其余动画选项的组合。

结束语

看完这篇文章后，相信你们对iOS的动画有了大体的了解，也学会了如何实现简单的视图动画，固然这些只是iOS Animation的冰山一角，我会陆续向你们介绍iOS Animation的其余知识，今天就先到这吧。