频道栏目
首页 > 程序开发 > 移动开发 > IOS > 正文
iOSUI篇—核心动画(关键帧动画CAKeyframeAnimation)
2018-03-05 16:50:59      个评论    来源:kata的博客  
收藏   我要投稿

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),产生抖动的视觉效果。

程序界面:

\

点击复制链接 与好友分享!回本站首页
上一篇:ionic优化(安卓机)方法
下一篇:iOS:UIView的transform属性以及拖拽view的实现
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站