又給自己挖了一個(gè)坑，我很喜歡動(dòng)畫不錯(cuò)荣挨，但是寫出來又是另外一個(gè)問題了～～～
這一篇我們來說說UIKit中的動(dòng)畫API，其中包括：
UIView.UIView.animateWithDuration
UIView.transitionWithView
UIView.animateKeyframesWithDuration
UIView.addKeyframeWithRelativeStartTime
今天的故事就將圍繞這些API展開，闡述他的前世今生饰及。
UIKit動(dòng)畫API使用起來十分簡(jiǎn)單與方便龙助，他避免了Core Animation的復(fù)雜性砰奕，雖然事實(shí)上UIKit動(dòng)畫API的底層使用的也是Core Animation。
來看第一個(gè)提鸟，UIView.UIView.animateWithDuration
先來看一下函數(shù)原型：
? ?class func animateWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)
一共七個(gè)參數(shù)：
duration
表示動(dòng)畫執(zhí)行時(shí)間军援。
delay
動(dòng)畫延遲時(shí)間。
usingSpringWithDamping
表示彈性屬性沽一。
initialSpringVelocity
初速度盖溺。
options
可選項(xiàng)，一些可選的動(dòng)畫效果铣缠，包括重復(fù)等烘嘱。
animations
表示執(zhí)行的動(dòng)畫內(nèi)容昆禽，包括透明度的漸變，移動(dòng)蝇庭，縮放醉鳖。
completion
表示執(zhí)行完動(dòng)畫后執(zhí)行的內(nèi)容。
關(guān)于這些參數(shù)哮内，選一個(gè)例子盗棵，嘗試不同的參數(shù)，這樣可以更好的理解每個(gè)參數(shù)的意義北发。
再來看一下UIView.transitionWithView,這是一個(gè)過度動(dòng)畫纹因，主要用于UIView進(jìn)入或者離開視圖。
先看一下這一個(gè)動(dòng)畫效果吧：
其中banner右移消失的動(dòng)畫用的就是上面提到的UIView.UIView.animateWithDuration琳拨，而進(jìn)入的動(dòng)畫用的就是現(xiàn)在要講的UIView.transitionWithView瞭恰。很像一頁書頁翻下來的感覺哈。
我們來看一下函數(shù)原型
? ? class func transitionWithView(view: UIView, duration: NSTimeInterval, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)
一共五個(gè)參數(shù)：
view
這當(dāng)然就是指定要進(jìn)行動(dòng)畫的對(duì)象了狱庇。
duration
和上面一樣這個(gè)參數(shù)指定動(dòng)畫時(shí)間長(zhǎng)短惊畏。
options
這是一個(gè)可選參數(shù)，雖然是可選的但是不填這個(gè)API就沒意義了密任，因?yàn)閁IView如何進(jìn)入視圖就是由這個(gè)參數(shù)決定颜启。到底是像書頁一樣翻進(jìn)去，還是像百葉窗一樣轉(zhuǎn)動(dòng)就是由這個(gè)參數(shù)決定浪讳，具體有哪些可以選擇缰盏，點(diǎn)進(jìn)去看看就知道了。
animations
這個(gè)選項(xiàng)你可以將它理解為在動(dòng)畫結(jié)束后UIView的形態(tài)驻债。
completion
動(dòng)畫結(jié)束后運(yùn)行的代碼乳规。
代碼大概長(zhǎng)這樣
UIView.transitionWithView(status, duration: 0.33, options:
? ? ? ? ? ? .CurveEaseOut | .TransitionCurlDown, animations: {
? ? ? ? ? ? ? ? self.yourView.hidden = false
? ? ? ? ? ? }, completion:nil
? ? ? ? })
到最后一個(gè)函數(shù)啦啦，UIView.animateKeyframesWithDuration合呐。動(dòng)畫效果如下：
我們很容易就可以發(fā)現(xiàn)暮的，這個(gè)動(dòng)畫分了很多階段完成，我們當(dāng)然可以用我們提到的第一個(gè)函數(shù)UIView.UIView.animateWithDuration來完成淌实，但是冻辩，你不覺得嵌套加嵌套顯得很不好看嗎，我們當(dāng)然還有更好的方法來實(shí)現(xiàn)拆祈，就是我們現(xiàn)在要說的恨闪，先來看一下函數(shù)原型：
class func animateKeyframesWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, options: UIViewKeyframeAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)
一共五個(gè)參數(shù):
duration：整個(gè)動(dòng)畫過程的時(shí)間。
delay：延遲多久開始放坏。
options：可選項(xiàng)咙咽，比如說重復(fù)，倒著來一遍等效果淤年，自己都試試看吧钧敞。
animations：需要執(zhí)行的動(dòng)畫蜡豹，里面可以是多個(gè)UIView.addKeyframeWithRelativeStartTime。
至于這個(gè)UIView.addKeyframeWithRelativeStartTime方法溉苛，類似于我們提到的第一個(gè)UIView.UIView.animateWithDuration镜廉，也是一個(gè)屬性漸變的方法，不過這個(gè)方法只能寫在他的爸爸 UIView.animateKeyframesWithDuration的animation參數(shù)函數(shù)塊中愚战。
completion：動(dòng)畫執(zhí)行結(jié)束之后執(zhí)行的代碼娇唯。
來看一下我們實(shí)現(xiàn)這個(gè)小飛機(jī)～飛啊飛～～的代碼：
let originalCenter = planeImage.center
? ? ? ? UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: .Repeat, animations: {
? ? ? ? ? ? //add keyframes
? ? ? ? ? ? UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
? ? ? ? ? ? ? ? self.planeImage.center.x += 80.0
? ? ? ? ? ? ? ? self.planeImage.center.y -= 10.0
? ? ? ? ? ? })
? ? ? ? ? ? UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4) {
? ? ? ? ? ? ? ? self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))
? ? ? ? ? ? }
? ? ? ? ? ? UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25) {
? ? ? ? ? ? ? ? self.planeImage.center.x += 100.0
? ? ? ? ? ? ? ? self.planeImage.center.y -= 50.0
? ? ? ? ? ? ? ? self.planeImage.alpha = 0.0
? ? ? ? ? ? }
? ? ? ? ? ? UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01) {
? ? ? ? ? ? ? ? self.planeImage.transform = CGAffineTransformIdentity
? ? ? ? ? ? ? ? self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
? ? ? ? ? ? }
? ? ? ? ? ? UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {
? ? ? ? ? ? ? ? self.planeImage.alpha = 1.0
? ? ? ? ? ? ? ? self.planeImage.center = originalCenter
? ? ? ? ? ? }
? ? ? ? ? ? }, completion:nil)
事實(shí)告訴我們動(dòng)畫是要靠設(shè)計(jì)的，你看我上面的動(dòng)畫抽的一筆寂玲，但事實(shí)上用同樣的代碼可以寫出很漂亮的動(dòng)畫塔插。
?文／StrongX（簡(jiǎn)書作者）
