上一篇文章中介紹了 UIKit 中一些基礎(chǔ)動畫，這些動畫足夠應(yīng)付普通的動畫交互。但是作為開發(fā)者僅僅掌握基礎(chǔ)用法顯然是不夠的，我們需要更強大的武器來應(yīng)對將來可能的復(fù)雜場景。接下來我們來看看 UIView 的進階動畫：Transitions、Keyframe Animations。

Transitions

在上一篇文章中介紹了基于屬性修改實現(xiàn)的動畫，但是如果需要你實現(xiàn)視圖的添加和移除的交互動畫呢？當(dāng)然你可以使用基礎(chǔ)動畫實現(xiàn)，但是這里將介紹新的動畫類型 - Transitions。不同于基礎(chǔ)動畫通過在起始和結(jié)束狀態(tài)之間的時間線上插值的實現(xiàn)過程，Transitions 會采用一種更為自然的方式來展現(xiàn)動畫過程。

上面的效果圖中：我們翻轉(zhuǎn)了頭像視圖，添加了紅色視圖然后又將其替換為藍色視圖。主要的代碼實現(xiàn)如下：

// 頭像翻轉(zhuǎn) 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)})

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

transitionFlipFromLeft 以垂直方向為軸從左到右翻轉(zhuǎn)

transitionFlipFromRight 以垂直方向為軸從右到左翻轉(zhuǎn)

transitionFlipFromTop 以水平方向為軸從上往下翻轉(zhuǎn)

transitionFlipFromBottom 以水平方向為軸從下往上翻轉(zhuǎn)

transitionCurlUp 右下角往后翻書效果

transitionCurlDown 右下角往前翻書效果

transitionCrossDissolve 交叉消失

Keyframe

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

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

知道了整個動畫的幾個關(guān)鍵幀我們就可以進行如下代碼實現(xiàn)了：

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)

在函數(shù) animateKeyframes 中我們依次添加了滑跑、調(diào)整角度、快速拉升、調(diào)整降落位置和角度、降落這五個關(guān)鍵幀，而每一個關(guān)鍵幀中的動畫設(shè)計幾乎與基礎(chǔ)動畫一樣簡單。所以只要我們能夠?qū)︻愃破鸾颠@樣復(fù)雜動畫的關(guān)鍵幀進行很好的提取和組合，那么一切都不在話下了。

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。