iOSUI篇—核心动画(关键帧动画CAKeyframeAnimation)

ios开发ui篇—核心动画(关键帧动画)

一、简单介绍

cakeyframeanimation是capropertyanimation的子类，跟cabasicanimation的区别是：cabasicanimation只能从一个数值(fromvalue)变到另一个数值(tovalue)，而cakeyframeanimation会使用一个nsarray保存这些数值

属性解析：

values：就是上述的nsarray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧

path：可以设置一个cgpathref\cgmutablepathref,让层跟着路径移动。path只对calayer的anchorpoint和position起作用。如果你设置了path，那么values将被忽略

keytimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keytimes中的每一个时间值都对应values中的每一帧.当keytimes没有设置的时候,各个关键帧的时间是平分的

说明：cabasicanimation可看做是最多只有2个关键帧的cakeyframeanimation

二、代码示例

第一种方式：

代码：

 9 #import "yyviewcontroller.h"
10 
11 @interface yyviewcontroller ()
12 @property (weak, nonatomic) iboutlet uiview *customview;
13 
14 @end
15 
16 @implementation yyviewcontroller
17 
18 
19 -(void)touchesbegan:(nsset *)touches withevent:(uievent *)event
20 {
21     //1.创建核心动画
22     cakeyframeanimation *keyanima=[cakeyframeanimation animation];
23     //平移
24     keyanima.keypath=@"position";
25     //1.1告诉系统要执行什么动画
26     nsvalue *value1=[nsvalue valuewithcgpoint:cgpointmake(100, 100)];
27     nsvalue *value2=[nsvalue valuewithcgpoint:cgpointmake(200, 100)];
28     nsvalue *value3=[nsvalue valuewithcgpoint:cgpointmake(200, 200)];
29     nsvalue *value4=[nsvalue valuewithcgpoint:cgpointmake(100, 200)];
30     nsvalue *value5=[nsvalue valuewithcgpoint:cgpointmake(100, 100)];
31     keyanima.values=@[value1,value2,value3,value4,value5];
32     //1.2设置动画执行完毕后，不删除动画
33     keyanima.removedoncompletion=no;
34     //1.3设置保存动画的最新状态
35     keyanima.fillmode=kcafillmodeforwards;
36     //1.4设置动画执行的时间
37     keyanima.duration=4.0;
38     //1.5设置动画的节奏
39     keyanima.timingfunction=[camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout];
40     
41     //设置代理，开始—结束
42     keyanima.delegate=self;
43     //2.添加核心动画
44     [self.customview.layer addanimation:keyanima forkey:nil];
45 }
46 
47 -(void)animationdidstart:(caanimation *)anim
48 {
49     nslog(@"开始动画");
50 }
51 
52 -(void)animationdidstop:(caanimation *)anim finished:(bool)flag
53 {
54     nslog(@"结束动画");
55 }
56 @end

说明：这个项目在storyboard中拖入了一个view，并和控制器中的custom进行了关联。

效果和打印结果：

补充：设置动画的节奏

第二种方式（使用path）让layer在指定的路径上移动（画圆）：

代码：

 #import "yyviewcontroller.h"
    
     @interface yyviewcontroller ()
     @property (weak, nonatomic) iboutlet uiview *customview;
    
     @end
    
     @implementation yyviewcontroller

     -(void)touchesbegan:(nsset *)touches withevent:(uievent *)event
     {
        //1.创建动画对象
        cakeyframeanimation *anim = [cakeyframeanimation animation];
        
        anim.duration = 2;
        
        uibezierpath *path = [uibezierpath bezierpath];
        [path movetopoint:cgpointmake(50, 50)];
        [path addlinetopoint:cgpointmake(300, 50)];
        [path addlinetopoint:cgpointmake(300, 400)];
        
        anim.keypath =  @"position";
        anim.path = path.cgpath;
        
        //设置代理，开始—结束
        keyanima.delegate=self;
        [self.imagev.layer addanimation:anim forkey:nil];
        
    }
    
    -(void)animationdidstart:(caanimation *)anim42
    {
        nslog(@"开始动画");
    }
    
    -(void)animationdidstop:(caanimation *)anim finished:(bool)flag47
    {
        nslog(@"结束动画");
    }
    @end

说明：可以通过path属性，让layer在指定的轨迹上运动。

停止动画：

40 - (ibaction)stoponclick:(uibutton *)sender {
41     //停止self.customview.layer上名称标示为wendingding的动画
42     [self.customview.layer removeanimationforkey:@"wendingding"];
43 }

点击停止动画，程序内部会调用? [self.customview.layer removeanimationforkey:@"wendingding"];

停止self.customview.layer上名称标示为wendingding的动画。

三、图标抖动

代码示例：

 9 #import "yyviewcontroller.h"
10 #define angle2radian(angle)  ((angle)/180.0*m_pi)
11 
12 @interface yyviewcontroller ()
13 @property (weak, nonatomic) iboutlet uiimageview *iconview;
14 
15 @end
16 
17 
18 @implementation yyviewcontroller
19 
20 -(void)touchesbegan:(nsset *)touches withevent:(uievent *)event
21 {
22     //1.创建核心动画
23     cakeyframeanimation *keyanima=[cakeyframeanimation animation];
24     keyanima.keypath=@"transform.rotation";
25     //设置动画时间
26     keyanima.duration=0.1;
27     //设置图标抖动弧度
28     //把度数转换为弧度  度数/180*m_pi
29     keyanima.values=@[@(-angle2radian(4)),@(angle2radian(4)),@(-angle2radian(4))];
30     //设置动画的重复次数(设置为最大值)
31     keyanima.repeatcount=maxfloat;
32     
33     keyanima.fillmode=kcafillmodeforwards;
34     keyanima.removedoncompletion=no;
35     //2.添加动画
36     [self.iconview.layer addanimation:keyanima forkey:nil];
37 }
38 
39 @end

说明：图标向左向右偏转一个弧度（4），产生抖动的视觉效果。

程序界面：