上一篇文章中介紹了 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 inlet 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 中的參數，其可與之前基本動畫中的選項進行組合，具體參數意思：

transitionFlipFromLeft 以垂直方向為軸從左到右翻轉

transitionFlipFromRight 以垂直方向為軸從右到左翻轉

transitionFlipFromTop 以水平方向為軸從上往下翻轉

transitionFlipFromBottom 以水平方向為軸從下往上翻轉

transitionCurlUp 右下角往后翻書效果

transitionCurlDown 右下角往前翻書效果

transitionCrossDissolve 交叉消失

Keyframe

前面那么介紹的那么多動畫大多都可以看作是單一的線形動畫，但是對于類型飛機起降這樣的復雜動畫來說則遠遠不夠。其實動畫就是很多圖片在時間線上組成的關鍵幀組合，如果能對其中某些關鍵幀進行提取并組合那么靈活性將大大提高。萬幸的是 Apple 早就為我們做好了一切，先看效果圖：

這里我們主要關注的是飛機起降過程的動畫實現，其他動畫后面又機會再講。真實的起降過程遠比效果圖復雜，但是這里我們進行了簡化。起飛過程大致如下圖所示：先平飛、然后調整角度、然后快速拉升。

知道了整個動畫的幾個關鍵幀我們就可以進行如下代碼實現了：

UIView.animateKeyframes(withDuration: 1.5, delay: 0.0, options: [], animations: {//add keyframesUIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: {self.planeImage.center.x += 80.0self.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.0self.planeImage.center.y -= 50.0self.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.identityself.planeImage.alpha = 1.0self.planeImage.center = originalCenter}}, completion: nil)

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

總結

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

總結

以上是生活随笔為你收集整理的UIView 动画进阶的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。