iOS UIView动画实践（二）：Spring Animation与人机交互

前言

经过上一篇文章，你们应该学会了如何使用'UIKit'建立最基本的视图动画，包括如何指定视图某属性的起始值和结束值，以及动画持续时间、动画延迟时间、动画选项等概念。

可是目前你们实现的动画不管是位置移动仍是大小改变都是以一个单一的方向在运动，好比位置从A点到B点，大小半径从1到2：

在这篇文章中，你们会学到更复杂一点的动画，让视图在一次动画中的运动轨迹像弹簧同样，有屡次不一样方向的运动，最后中止在终点：

若是给位置移动的动画添加弹簧效果，那么视图的运动轨迹应该像下图中展示的同样：

这会使你的动画看起来更逼真、更真实、更贴近现实。在某些状况下带给用户更好的用户体验。那么让咱们开始学习吧。

Spring动画

咱们仍是以上一篇文章中的登陆页面为例，你们应该发现了那个呆板的登陆按钮吧，咱们今天就让它Q弹起来。

打开ViewController.swift，在viewWillAppear()方法的底部添加以下代码：

[cpp] view plaincopy

1. self.loginButton.center.y += 30  

2. self.loginButton.alpha = 0  

让登陆按钮在屏幕呈现以前位置下移30，而且让它透明。而后在viewDidAppear()方法的底部添加以下代码：

[cpp] view plaincopy

1. UIView.animateWithDuration(1, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .AllowUserInteraction, animations: {  

2.      self.loginButton.center.y -= 30  

3.      self.loginButton.alpha = 1  

4. }, completion: nil)  

上述的代码你们是否是似曾相识，没错，依然是UIView的类方法，不过又多了两个参数：

• usingSpringWithDamping：弹簧动画的阻尼值，也就是至关于摩擦力的大小，该属性的值从0.0到1.0之间，越靠近0，阻尼越小，弹动的幅度越大，反之阻尼越大，弹动的幅度越小，若是大道必定程度，会出现弹不动的状况。

• initialSpringVelocity：弹簧动画的速率，或者说是动力。值越小弹簧的动力越小，弹簧拉伸的幅度越小，反之动力越大，弹簧拉伸的幅度越大。这里须要注意的是，若是设置为0，表示忽略该属性，由动画持续时间和阻尼计算动画的效果。

下面咱们先来看看不一样动力的效果：

• 持续时间为3秒，阻尼为0.5，动力为1：

                                        

• 持续时间为3秒，阻尼为0.5，动力为20：

                                        

当initialSpringVelocity的值为1时，登陆按钮上下弹力并非很强劲，当设置为20时，登陆按钮直接冲过了密码输入框，这就是动力的效果。

而后咱们再看看不一样阻尼的效果：

• 持续时间为3秒，阻尼为0.1，动力为0：

                                        

• 持续时间为3秒，阻尼为1，动力为0：

                                        

当usingSpringWithDamping属性值为0.1时，表示阻尼很小，虽然没有动力因素的影响，但登陆按钮弹动的幅度依然比较大，至关于在冰面滑行同样。当该属性为1时，表示阻尼很是大，能够看到登陆按钮几乎是没有什么弹动的幅度。这就是阻尼的效果。

你们须要注意的一点是，弹簧动画并不仅做用于位置的变化，它能够做用于全部动画属性的变化，好比咱们在animations的闭包中除了位置的变化外，还有透明度的变化，它也一样有弹簧动画的效果，只不过它没有位置变化那么明显和贴近真实，它会表现出一闪一闪的效果：

                                        

你们能够尝试这几个属性不一样值的组合，选出一个本身以为满意的弹簧效果便可。

将动画运用到人机交互

上一节讲的弹簧动画的确可让咱们的UI变得鲜活起来，但这仅仅是看在眼里的，对于用户的操做却并无什么响应和反馈。在这节会教你们如何让视图在用户进行点击操做时以动画的形式给予响应和反馈。

在ViewController.swift中有一个名为login()的方法，关联了登陆按钮的Touch Up Inside事件，在该方法中添加以下代码：

[cpp] view plaincopy

1. UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: .AllowUserInteraction, animations: {  

2.     self.loginButton.bounds.size.width += 25  

3. }, completion: nil)  

此时每当咱们点击登陆按钮一次，它就会变胖一些。编译运行看一下效果：

                                        

咱们能够再组合一个效果，使点击登陆按钮时不只让它变胖，还有轻微的向下弹跳效果。在login()方法底部添加以下代码：

[cpp] view plaincopy

1. UIView.animateWithDuration(0.3, delay: 0.0, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.0, options: .AllowUserInteraction, animations: {  

2.     self.loginButton.center.y += 10  

3. }, completion: nil)  

编译运行看一下效果：

                                        

以上只是两个简单的将动画运用到人机交互的例子，你们能够在本身的项目中将一些用户的操做加上视图的动画反馈，让你的应用鲜活起来。

结束语

这一篇文章向你们讲解了UIView的Spring动画，以及将动画运用到人机交互中，使提高应用的用户体验，你们能够多多尝试Spring动画的各个属性，以及结合上一篇文章的知识，组合出更美妙的动画效果。下一篇文章会给你们介绍UIView的Transition动画，敬请期待。