UIView 動畫進階

上一篇文章中介紹了 UIKit 中一些基礎動畫，這些動畫足夠應付普通的動畫交互。可是做爲開發者僅僅掌握基礎用法顯然是不夠的，咱們須要更強大的武器來應對未來可能的複雜場景。接下來咱們來看看 UIView 的進階動畫：Transitions、Keyframe Animations。

Transitions

在上一篇文章中介紹了基於屬性修改實現的動畫，可是若是須要你實現視圖的添加和移除的交互動畫呢？固然你可使用基礎動畫實現，可是這裏將介紹新的動畫類型 - Transitions。不一樣於基礎動畫經過在起始和結束狀態之間的時間線上插值的實現過程，Transitions 會採用一種更爲天然的方式來展示動畫過程。

上面的效果圖中：咱們翻轉了頭像視圖，添加了紅色視圖而後又將其替換爲藍色視圖。主要的代碼實現以下：

// 頭像翻轉
UIView.transition(from: backView!, to: avatorView, duration: 1, options: [.transitionCrossDissolve], completion: nil)
    
// 添加紅色視圖
UIView.transition(with: animationContainserView!, duration: 1, options: [.transitionCrossDissolve], animations: {
    self.animationContainserView!.addSubview(redView)
}, completion: { finished in
    let blueView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: 60, height: 60))
    blueView.backgroundColor = UIColor.blue
        
    // 替換紅色視圖
    UIView.transition(from: redView, to: blueView, duration: 1, options: [.transitionCrossDissolve], completion: nil)
        
})

其中第一個函數中，咱們將 backView 從其父視圖中移除，並將 avatorview 添加進去。而第二個函數中咱們將紅色視圖 newView 添加到參數 animationContainserView 表明的視圖中。其中控制動畫過渡效果的是
options 中的參數，其可與以前基本動畫中的選項進行組合，具體參數意思：

1. transitionFlipFromLeft 以垂直方向爲軸從左到右翻轉

2. transitionFlipFromRight 以垂直方向爲軸從右到左翻轉

3. transitionFlipFromTop 以水平方向爲軸從上往下翻轉

4. transitionFlipFromBottom 以水平方向爲軸從下往上翻轉

5. transitionCurlUp 右下角日後翻書效果

6. transitionCurlDown 右下角往前翻書效果

7. transitionCrossDissolve 交叉消失

Keyframe

前面那麼介紹的那麼多動畫大多均可以看做是單一的線形動畫，可是對於類型飛機起降這樣的複雜動畫來講則遠遠不夠。其實動畫就是不少圖片在時間線上組成的關鍵幀組合，若是能對其中某些關鍵幀進行提取並組合那麼靈活性將大大提升。萬幸的是 Apple 早就爲咱們作好了一切，先看效果圖：

這裏咱們主要關注的是飛機起降過程的動畫實現，其餘動畫後面又機會再講。真實的起降過程遠比效果圖複雜，可是這裏咱們進行了簡化。起飛過程大體以下圖所示：先平飛、而後調整角度、而後快速拉昇。

知道了整個動畫的幾個關鍵幀咱們就能夠進行以下代碼實現了：

UIView.animateKeyframes(withDuration: 1.5, delay: 0.0, options: [], animations: {
    //add keyframes
  
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: {
        self.planeImage.center.x += 80.0
        self.planeImage.center.y -= 10.0
    })
  
    UIView.addKeyframe(withRelativeStartTime: 0.1, relativeDuration: 0.4) {
        self.planeImage.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_4/2))
    }
  
    UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
        self.planeImage.center.x += 100.0
        self.planeImage.center.y -= 50.0
        self.planeImage.alpha = 0.0
    }
  
    UIView.addKeyframe(withRelativeStartTime: 0.51, relativeDuration: 0.3) {
        self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y - 40)
        self.planeImage.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_4/2))

    }
  
    UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.45) {
        self.planeImage.transform = CGAffineTransform.identity
        self.planeImage.alpha = 1.0
        self.planeImage.center = originalCenter
    }
  
}, completion: nil)

在函數 animateKeyframes 中咱們依次添加了滑跑、調整角度、快速拉昇、調整降落位置和角度、降落這五個關鍵幀，而每個關鍵幀中的動畫設計幾乎與基礎動畫同樣簡單。因此只要咱們可以對相似起降這樣複雜動畫的關鍵幀進行很好的提取和組合，那麼一切都不在話下了。

總結

UIKit 框架中的動畫大部分都在這篇文章中介紹，還有一些新的動畫特性後面再將。接下來文章中將會把目光投入到 Core Animations 中，內容將會在以前的基礎上探索更多動畫相關的特性。Let's Go!