UIView 動畫基礎

上次寫完 iOS 動畫基礎部分的文章後，爲了更加系統、準確的總結動畫部分的知識，特意花了很多時間學習了這個方向的知識。對於開發者來講動畫的實現過程是很是有趣的，並且動畫會讓咱們的 APP 變的富有生命力。這篇文章講介紹 UIKit 框架中的動畫接口，大多數狀況下這些高級接口徹底能知足咱們的動畫實現的需求。

接下來咱們經過基礎動畫、彈簧動畫來說解 UIKit 中動畫的一些基礎內容。

基本動畫

UIKit 中基本動畫效果以下圖所示，接下來咱們對照動圖分析它的實現步驟以及細節。

動畫無非就是控件狀態變化的過程，因此首先要作的就是設置動畫的初始狀態。而初始狀態無非就是 UIView 對象的屬性進行一些設置，這些屬性大抵可分爲：位置與大小、背景色、透明度、旋轉角度。上圖演示的動畫中，兩個 UITextField 和一個 UILabel 從左到右出現，而兩個 UIImageView 從透明到出現，因此咱們在 viewWillAppear 設置以下代碼：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    heading.center.x  -= view.bounds.width
    username.center.x -= view.bounds.width
    password.center.x -= view.bounds.width
    cloud1.alpha = 0
    cloud2.alpha = 0
}

接下來就是動畫過程，也就是時間線加上最終的屬性值，而這個實現是經過如下高級 API 接口實現的：

animate(withDuration duration: TimeInterval, animations: @escaping () -> Void)
animate(withDuration duration: TimeInterval, animations: @escaping () -> Void, completion: ((Bool) -> Void)? = nil)
animate(withDuration duration: TimeInterval, delay: TimeInterval, options: UIViewAnimationOptions = [], animations: @escaping () -> Void, completion: ((Bool) -> Void)? = nil)

從上到下功能逐漸豐富，第一個函數僅僅是完成動畫，第二個函數則增長了動畫完成後的收尾處理閉包，而最後一個不只添加了延遲啓動參賽更有動畫效果的設置參數。參數的解釋以下：

• withDuration：動畫時長

• delay：動畫延遲開始的時長

• options：動畫過分的選項

• animations：動畫最終結果設置閉包

• completion：動畫結束的收尾閉包

因此上圖效果的動畫代碼以下：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    UIView.animate(withDuration: 0.5, animations: {
     self.heading.center.x += self.view.bounds.width
    })

    UIView.animate(withDuration: 0.5, delay: 0.3, options: [], animations: {
        self.username.center.x += self.view.bounds.width
    }, completion: nil)

    UIView.animate(withDuration: 0.5, delay: 0.4, options: [], animations: {
        self.password.center.x += self.view.bounds.width
    }, completion: nil)

    UIView.animate(withDuration: 0.2, delay: 0.5, options: [], animations: {
        self.cloud1.alpha = 1
    }, completion: nil)

    UIView.animate(withDuration: 0.2, delay: 0.6, options: [], animations: {
        self.cloud2.alpha = 1
    }, completion: nil)
}

你可能注意到了上面代碼中 options 參數都沒有設置有效值，下面咱們介紹下 options 參數的一些經常使用數值。

• repeat: 表示該動畫循環展現。

• autoreverse：表示該動畫反向進行，須要與 repeat 一同使用。

• curveEaseInOut：表示動畫先加速，而後勻速，最後減速，動畫的默認效果。

• curveEaseIn：表示動畫由慢到快一直加速。

• curveEaseOut：表示動畫由快到慢全程減速。

• curveLinear：表示動畫全程勻速。

下面咱們修改代碼並查看效果：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    UIView.animate(withDuration: 0.5, animations: {
    self.heading.center.x += self.view.bounds.width
    })

    UIView.animate(withDuration: 0.5, delay: 0.3, options: [.curveEaseIn], animations: {
        self.username.center.x += self.view.bounds.width
    }, completion: nil)

    UIView.animate(withDuration: 0.5, delay: 0.4, options: [.curveEaseOut], animations: {
        self.password.center.x += self.view.bounds.width
    }, completion: nil)

    UIView.animate(withDuration: 0.2, delay: 0.5, options: [.curveEaseInOut], animations: {
        self.cloud1.alpha = 1
    }, completion: nil)

    UIView.animate(withDuration: 0.2, delay: 0.6, options: [.repeat,.autoreverse], animations: {
        self.cloud2.alpha = 1
    }, completion: nil)
}

彈簧動畫

不一樣於上一部分的基礎動畫的單一方向進行，彈簧動畫會在動畫的過程當中出現相似於彈簧那樣的震盪衰減的效果。這種動畫效果在 iOS 系統中獲得普遍採用，由於它的效果更接近於真實世界。

在上面的基礎上，咱們對登陸按鍵實現彈簧動畫。步驟於上面一致，先設置動畫起始時的狀態，添加以下代碼：

override func viewWillAppear(_ animated: Bool) {
    ...
    
    loginButton.center.y += 30.0 
    loginButton.alpha = 0.0
}

緊接着咱們調用動畫接口進行實現：

override func viewDidAppear(_ animated: Bool) {
    ...
    UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: {
        self.loginButton.center.y -= 30.0
        self.loginButton.alpha = 1.0
    }, completion: nil)
        
}

上面的代碼中有兩個要點：

1. 能夠在一次動畫的過程當中修改多個屬性值

2. 彈簧動畫是經過函數 animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:opti ons:animations:completion:) 來實現的。

此處使用的函數與以前的基礎動畫函數並無太多的差異，只不過多了兩個參數：

1. usingSpringWithDamping：動畫的阻尼係數，阻尼係數的取值範圍爲 0.0 ～ 1.0。數值越小震動幅度越大，你也能夠將其看做是彈簧的剛度。

2. initialSpringVelocity：動畫的初始速度。

效果圖以下：

總結

除了略坑的 Xcode 和捉急的 Swift 自動補全，Apple 仍是爲開發者做了很多的工做。例如，上面動畫內容提到的接口就足夠你們應對簡單的動畫交互場景了。固然比較複雜的動畫內容將會在下篇文章中奉上。