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的其餘知識，今天就先到這吧。