iOS動畫：UIView動畫和CALayer動畫（CABasicAnimation、CAKeyframeAnimation的使用）

ios中的動畫有兩種實作方式，一種是uiview來實作動畫，另一種動畫是通過calayer來實作，下面介紹兩種動畫的簡單實作：

一、uiview動畫的實作

   uiview使用context來實作動畫

關鍵代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<code>//參數1 動畫名稱 參數2 要實作動畫的對象上下文</code>

<code>    </code> 

<code>    </code><code>[uiview beginanimations:@</code><code>"attribute"</code> <code>context:_showimageview];</code>

<code>    </code><code>//設定動畫的時間</code>

<code>    </code><code>[uiview setanimationduration:1.0f];</code>

<code>    </code><code>//設定動畫延遲時間</code>

<code>//    [uiview setanimationdelay:2];</code>

<code>    </code><code>//設定視圖center 實作試圖移動動畫</code>

<code>    </code><code>_showimageview.center = cgpointmake(100, 100);</code>

<code>    </code><code>//設定alpha值:視圖透明度</code>

<code>    </code><code>_showimageview.alpha = 0.2f;</code>

<code>    </code><code>//設定背景顔色</code>

<code>    </code><code>_showimageview.backgroundcolor = [uicolor greencolor];</code>

<code>    </code><code>//uiview動畫 設定代理</code>

<code>    </code><code>[uiview setanimationdelegate:self];</code>

<code>    </code><code>//動畫将要開始代理方法</code>

<code>    </code><code>[uiview setanimationwillstartselector:@selector(animationwillstart:context:)];</code>

<code>    </code><code>//動畫已經結束代理方法</code>

<code>    </code><code>[uiview setanimationdidstopselector:@selector(animationdidstop:finished:context:)];</code>

<code>    </code><code>//送出動畫設定，執行動畫</code>

<code>    </code><code>[uiview commitanimations];</code>

使用block實作的動畫：

<code>//uiview動畫， 使用block實作</code>

<code>    </code><code>[uiview animatewithduration:1.0f animations:^{</code>

<code>        </code> 

<code>        </code><code>//通過設定translation 實作視圖的偏移</code>

<code>        </code><code>if</code> <code>([self.myswitch ison]) {</code>

<code>            </code> 

<code>            </code><code>//基于上一次的translation</code>

<code>            </code><code>_showimageview.transform = cgaffinetransformtranslate(_showimageview.transform, 50, 0);</code>

<code>        </code><code>} </code><code>else</code> <code>{</code>

<code>            </code><code>//基于原始的translation</code>

<code>            </code><code>_showimageview.transform = cgaffinetransformmaketranslation(-50, 0);</code>

<code>        </code><code>}</code>

<code>    </code><code>}];</code>

二、calayer動畫的實作

cabasic動畫的實作：根據初始位置和結束位置确定動畫

<code>//cabasic 有兩個屬性 fromvalue 動畫開始值，tovalue動畫結束值</code>

<code>    </code><code>cabasicanimation *animation1 = [cabasicanimation animationwithkeypath:@</code><code>"position"</code><code>];</code>

<code>    </code><code>[animation1 setduration:2];</code>

<code>    </code><code>animation1.fromvalue = [nsvalue valuewithcgpoint:cgpointmake(150, 150)];</code>

<code>    </code><code>animation1.tovalue = [nsvalue valuewithcgpoint:cgpointmake(200, 200)];</code>

<code>    </code><code>[_imageview.layer addanimation:animation1 forkey:@</code><code>"position"</code><code>];</code>

建立一組動畫：

<code>//建立組動畫對象</code>

<code>    </code><code>caanimationgroup *group = [caanimationgroup animation];</code>

<code>    </code><code>//cabasic動畫</code>

<code>    </code><code>cabasicanimation *animation1 = [cabasicanimation animationwithkeypath:@</code><code>"transform.scale.y"</code><code>];</code>

<code>    </code><code>animation1.fromvalue = @1.5;</code>

<code>    </code><code>animation1.tovalue = @0.5;</code>

<code>    </code><code>//關鍵幀動畫</code>

<code>    </code><code>cakeyframeanimation *animation2 = [cakeyframeanimation animationwithkeypath:@</code><code>"position"</code><code>];</code>

<code>    </code><code>animation2.values = @[[nsvalue valuewithcgpoint:cgpointmake(100, 100)],</code>

<code>                         </code><code>[nsvalue valuewithcgpoint:cgpointmake(200, 150)],</code>

<code>                         </code><code>[nsvalue valuewithcgpoint:cgpointmake(100, 200)],</code>

<code>                         </code><code>[nsvalue valuewithcgpoint:cgpointmake(200, 250)]];</code>

<code>    </code><code>//group添加動畫數組，group中動畫對象并發執行</code>

<code>    </code><code>[group setanimations:@[animation1, animation2]];</code>

<code>    </code><code>[group setduration:4.0f];</code>

<code>    </code><code>[_imageview.layer addanimation:group forkey:@</code><code>"group"</code><code>];</code>