又給自己挖了一個(gè)坑，我很喜歡動(dòng)畫不錯(cuò)，但是寫出來又是另外一個(gè)問題了～～～
這一篇我們來說說UIKit中的動(dòng)畫API，期中包括：

• UIView.UIView.animateWithDuration
• UIView.transitionWithView
• UIView.animateKeyframesWithDuration
• UIView.addKeyframeWithRelativeStartTime
  今天的故事就將圍繞這些API展開，闡述他的前世今生。

UIKit動(dòng)畫API使用起來十分簡單與方便，他避免了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ù)的意義。

好丑的動(dòng)畫

<pre><code>
self.animationView2.alpha = 0
self.animationView3.alpha = 0
UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in
self.animationView.center.y += 100
}) { (Bool) -> Void in
println("finish")
}
UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in
self.animationView2.alpha = 1
}) { (Bool) -> Void in
println("finish")
}
UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in
self.animationView3.center.y -= 100
self.animationView3.alpha = 1
}) { (Bool) -> Void in
println("finish")
}

</code></pre>

代碼就不逐行解釋，三個(gè)UIView.animateWithDuration分別操作三個(gè)方塊。第一個(gè)方塊是一個(gè)移動(dòng)動(dòng)畫，第二個(gè)方塊是一個(gè)透明度漸變動(dòng)畫，第三個(gè)方塊是移動(dòng)加透明度漸變的組合動(dòng)畫，可能看的不是很清楚。不得不說這個(gè)動(dòng)畫真的很丑~~~
UIView.UIView.animateWithDuration這個(gè)API說穿了就是逐漸改變UIView的某項(xiàng)屬性，這些屬性包括：位置，大小，透明度，顏色等等。

再來看一下UIView.transitionWithView,這是一個(gè)過度動(dòng)畫，主要用于UIView進(jìn)入或者離開視圖。

先看一下這一個(gè)動(dòng)畫效果吧：

9.gif

其中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)畫的對象了。
• duration
• 和上面一樣這個(gè)參數(shù)指定動(dòng)畫時(shí)間長短。
• 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)行的代碼。

代碼大概長這樣
<pre><code>
UIView.transitionWithView(status, duration: 0.33, options:
.CurveEaseOut | .TransitionCurlDown, animations: {
self.yourView.hidden = false
}, completion:nil
})
</code></pre>

這一部分代碼已上傳Github，Github地址在文章的最后面。
我相信看看源代碼，大家都能明白的。

這里再給大家看一個(gè)動(dòng)畫，也是用前面提到過的函數(shù)寫的：

尼瑪～這顯示效果太差了吧，不知道你們那里看到的是什么樣的

仿3D效果，代碼也在上傳的那個(gè)Demo中，大家自己看啦～

到最后一個(gè)函數(shù)啦啦，UIView.animateKeyframesWithDuration，先來看一下動(dòng)畫效果吧。

小飛機(jī)～飛啊飛～

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ī)～飛啊飛～～的代碼：

<pre><code>
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)

</code></pre>

完整的代碼在最后提供的源代碼中有。

事實(shí)告訴我們動(dòng)畫是要靠設(shè)計(jì)的，你看我上面的動(dòng)畫抽的一筆，但事實(shí)上用同樣的代碼可以寫出很漂亮的動(dòng)畫。

代碼已上傳Github：https://github.com/superxlx/iOS_Animation_Test1