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>