iOS動畫——ViewAnimations

theFeng-發表於2015-05-21
iOS動畫View

又給自己挖了一個坑，我很喜歡動畫不錯，但是寫出來又是另外一個問題了～～～

這一篇我們來說說UIKit中的動畫API，其中包括：

  • UIView.UIView.animateWithDuration

  • UIView.transitionWithView

  • UIView.animateKeyframesWithDuration

    • UIView.addKeyframeWithRelativeStartTime

今天的故事就將圍繞這些API展開，闡述他的前世今生。

UIKit動畫API使用起來十分簡單與方便，他避免了Core Animation的複雜性，雖然事實上UIKit動畫API的底層使用的也是Core Animation。

來看第一個，UIView.UIView.animateWithDuration

先來看一下函式原型：

1
   class func animateWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共七個引數：

  • duration

    • 表示動畫執行時間。

  • delay

    • 動畫延遲時間。

  • usingSpringWithDamping

    • 表示彈性屬性。

  • initialSpringVelocity

    • 初速度。

  • options

    • 可選項，一些可選的動畫效果，包括重複等。

  • animations

    • 表示執行的動畫內容，包括透明度的漸變，移動，縮放。

  • completion

    • 表示執行完動畫後執行的內容。

關於這些引數，選一個列子，嘗試不同的引數，這樣可以更好的理解每個引數的意義。

1.gif

好醜的動畫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        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")
        }

程式碼就不逐行解釋，三個UIView.animateWithDuration分別操作三個方塊。第一個方塊是一個移動動畫，第二個方塊是一個透明度漸變動畫，第三個方塊是移動加透明度漸變的組合動畫，可能看的不是很清楚。不得不說這個動畫真的很醜~~~

UIView.UIView.animateWithDuration這個API說穿了就是逐漸改變UIView的某項屬性，這些屬性包括：位置，大小，透明度，顏色等等。

再來看一下UIView.transitionWithView,這是一個過度動畫，主要用於UIView進入或者離開檢視。

先看一下這一個動畫效果吧：

2.gif

其中banner右移消失的動畫用的就是上面提到的UIView.UIView.animateWithDuration，而進入的動畫用的就是現在要講的UIView.transitionWithView。很像一頁書頁翻下來的感覺哈。

我們來看一下函式原型

1
    class func transitionWithView(view: UIView, duration: NSTimeInterval, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共五個引數：

  • view

    • 這當然就是指定要進行動畫的物件了。

  • duration

    • 和上面一樣這個引數指定動畫時間長短。

  • options

    • 這是一個可選引數，雖然是可選的但是不填這個API就沒意義了，因為UIView如何進入檢視就是由這個引數決定。到底是像書頁一樣翻進去，還是像百葉窗一樣轉動就是由這個引數決定，具體有哪些可以選擇，點進去看看就知道了。

  • animations

    • 這個選項你可以將它理解為在動畫結束後UIView的形態。

  • completion

    • 動畫結束後執行的程式碼。

程式碼大概長這樣

1
2
3
4
5
UIView.transitionWithView(status, duration: 0.33, options:
            .CurveEaseOut | .TransitionCurlDown, animations: {
                self.yourView.hidden = false
            }, completion:nil
        })

這一部分程式碼已上傳Github，Github地址在文章的最後面。

我相信看看原始碼，大家都能明白的。

這裡再給大家看一個動畫，也是用前面提到過的函式寫的：

3.gif

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

仿3D效果，程式碼也在上傳的那個Demo中，大家自己看啦～

到最後一個函式啦啦，UIView.animateKeyframesWithDuration，先來看一下動畫效果吧。

4.gif

小飛機～飛啊飛～

我們很容易就可以發現，這個動畫分了很多階段完成，我們當然可以用我們提到的第一個函式UIView.UIView.animateWithDuration來完成，但是，你不覺得巢狀加巢狀顯得很不好看嗎，我們當然還有更好的方法來實現，就是我們現在要說的，先來看一下函式原型：

1
class func animateKeyframesWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, options: UIViewKeyframeAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共五個引數:

  • duration：整個動畫過程的時間。

  • delay：延遲多久開始。

  • options：可選項，比如說重複，倒著來一遍等效果，自己都試試看吧。

  • animations：需要執行的動畫，裡面可以是多個UIView.addKeyframeWithRelativeStartTime。

    • 至於這個UIView.addKeyframeWithRelativeStartTime方法，類似於我們提到的第一個UIView.UIView.animateWithDuration，也是一個屬性漸變的方法，不過這個方法只能寫在他的爸爸UIView.addKeyframeWithRelativeStartTime的animation引數函式塊中。

  • completion：動畫執行結束之後執行的程式碼。

來看一下我們實現這個小飛機～飛啊飛～～的程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)

完整的程式碼在最後提供的原始碼中有。

事實告訴我們動畫是要靠設計的，你看我上面的動畫抽的一筆，但事實上用同樣的程式碼可以寫出很漂亮的動畫。

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

ios交流群：2966696，歡迎加入

本文轉載

相關文章