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動畫，敬請期待。