iOS Core Animation 核心动画（上）

一、简介

Core Animation，中文翻译为核心动画，它是一组非常强大的动画处理API，使用它能做出非常炫丽的动画效果，而且往往是事半功倍。也就是说，使用少量的代码就可以实现非常强大的功能。

Core Animation是跨平台的，可以用在Mac OS X和iOS平台。

Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。不阻塞主线程，可以理解为在执行动画的时候还能点击（按钮）。

要注意的是，Core Animation是直接作用在CALayer上的，并非UIView。

Core Animation的使用步骤

1.使用它需要先添加QuartzCore.framework框架和引入主头文件(iOS7不需要)

2.初始化一个CAAnimation对象，并设置一些动画相关属性

3.通过调用CALayer的addAnimation:forKey:方法增加CAAnimation对象到CALayer中，这样就能开始执行动画了

4.通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画

属性及说明

CAAnimation是所有动画类的父类，但是它不能直接使用，应该使用它的子类。

（1）能用的动画类只有4个子类：CABasicAnimation（基础动画）、CAKeyframeAnimation（关键帧动画）、CATransition（转场动画）、CAAnimationGroup（组动画）

（2）CAMediaTiming是一个协议(protocol)。

CAPropertyAnimation是CAAnimation的子类，但是不能直接使用，要想创建动画对象，应该使用它的两个子类：CABasicAnimation（基础动画）和CAKeyframeAnimation（关键帧动画）

属性：(（**）代表来自CAMediaTiming协议的属性)

duration：（**）动画的持续时间

repeatCount：（**）动画的重复次数

repeatDuration：（**）动画的重复时间

removedOnCompletion：默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards

fillMode：（**）决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后

beginTime：（**）可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，CACurrentMediaTime()为图层的当前时间

timingFunction：速度控制函数，控制动画运行的节奏

delegate：动画代理

二、基础动画 CABasicAnimation

CAPropertyAnimation的子类

属性解析:

fromValue：keyPath相应属性的初始值

toValue：keyPath相应属性的结束值

随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValue

如果fillMode=kCAFillModeForwards && removedOnComletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。

比如，CALayer的position初始值为(0,0)，CABasicAnimation的fromValue为(10,10)，toValue为(100,100)，虽然动画执行完毕后图层保持在(100,100)这个位置，实质上图层的position还是为(0,0)

1、平移动画

创建layer

CALayer *myLayer=[CALayer layer];

//设置layer的属性

myLayer.bounds=CGRectMake(0, 0, 50, 80);

myLayer.backgroundColor=[UIColor yellowColor].CGColor;

myLayer.position=CGPointMake(50, 50);

myLayer.anchorPoint=CGPointMake(0, 0);

myLayer.cornerRadius=20;

//添加layer

[self.view.layer addSublayer:myLayer];

//设置动画（基础动画）

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

//1.创建核心动画

//    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]

CABasicAnimation *anima=[CABasicAnimation animation];

//1.1告诉系统要执行什么样的动画  设置的keyPath是@"position"，说明要修改的是CALayer的position属性，也就是会执行平移动画

anima.keyPath=@"position";

//设置通过动画，将layer从哪儿移动到哪儿  这里的属性接收的时id类型的参数，因此并不能直接使用CGPoint这种结构体类型，而是要先包装成NSValue对象后再使用。

//byValue和toValue的区别，byValue--是在当前的位置上增加多少，toValue--是移动到指定的位置。

anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];

anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];

//1.2设置动画执行完毕之后不删除动画

anima.removedOnCompletion=NO;

//1.3设置保存动画的最新状态

anima.fillMode=kCAFillModeForwards;

//2.添加核心动画到layer

[myLayer addAnimation:anima forKey:nil];

}


效果

设置代理：设置动画的代理，可以监听动画的执行过程，这里设置控制器为代理。

-(void)animationDidStart:(CAAnimation *)anim{

NSLog(@"开始执行动画");

}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

//动画执行完毕，打印执行完毕后的position值

NSString *str=NSStringFromCGPoint(self.myLayer.position);

NSLog(@"执行后：%@",str);//打印position的属性值，验证图层的属性值还是动画执行前的初始值{50，50}，并没有真正被改变为{200，300}。

}

2、缩放动画

//创建layer

CALayer *myLayer=[CALayer layer];

myLayer.bounds=CGRectMake(0, 0, 150, 60);

myLayer.backgroundColor=[UIColor yellowColor].CGColor;

myLayer.position=CGPointMake(50, 50);

myLayer.anchorPoint=CGPointMake(0, 0);

myLayer.cornerRadius=40;

[self.view.layer addSublayer:myLayer];

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

//1.创建动画

CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];

//1.1设置动画执行时间

anima.duration=2.0;

//1.2设置动画执行完毕后不删除动画

anima.removedOnCompletion=NO;

//1.3设置保存动画的最新状态

anima.fillMode=kCAFillModeForwards;

//1.4修改属性，执行动画

anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];

//2.添加动画到layer

[myLayer addAnimation:anima forKey:nil];

}

效果

3、旋转动画

//创建layer（同缩放）

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

//1.创建动画

CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"transform"];

//1.1设置动画执行时间

anima.duration=2.0;

//1.2修改属性，执行动画  如果要让图形以2D的方式旋转，只需要把CATransform3DMakeRotation在z方向上的值改为1即可。

anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];

//1.3设置动画执行完毕后不删除动画

anima.removedOnCompletion=NO;

//1.4设置保存动画的最新状态

anima.fillMode=kCAFillModeForwards;

//2.添加动画到layer

[self.myLayer addAnimation:anima forKey:nil];

}

anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];

效果

4、补充

4.1、可以通过transform（KVC）的方式来进行设置

4.2、fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用.

各个fillMode的意义

kCAFillModeRemoved - 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态

kCAFillModeForwards - 当动画结束后,layer会一直保持着动画最后的状态

kCAFillModeBackwards - 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态

kCAFillModeBoth - 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

三、关键帧动画 CAKeyframeAnimation

1、简介

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

2、平移

@property (nonatomic, strong) UIView *customView;

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

//1.创建核心动画

CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];

keyAnima.keyPath = @"position";//平移

//1.1告诉系统要执行什么动画

keyAnima.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 100)],

[NSValue valueWithCGPoint:CGPointMake(200, 100)],

[NSValue valueWithCGPoint:CGPointMake(200, 200)],

[NSValue valueWithCGPoint:CGPointMake(100, 200)],

[NSValue valueWithCGPoint:CGPointMake(100, 100)]];

//1.2设置动画执行完毕后，不删除动画  默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards

keyAnima.removedOnCompletion = NO;

//1.3设置保存动画的最新状态

keyAnima.fillMode = kCAFillModeForwards;

//1.4设置动画执行的时间

keyAnima.duration = 4.0;

//1.5速度控制函数，控制动画运行的节奏

keyAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

//设置代理，开始—结束

keyAnima.delegate = self;

//2.添加核心动画

[self.customView.layer addAnimation:keyAnima forKey:nil];

//beginTime：可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，CACurrentMediaTime()为图层的当前时间

}

-(void)animationDidStart:(CAAnimation *)anim{

NSLog(@"开始动画"); }

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
NSLog(@"结束动画"); }

1.5----

设置动画的节奏

3、使用path，让layer在指定的路径上移动（画圆）

//1.创建核心动画

CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];

keyAnima.keyPath=@"position";//平移

//1.1告诉系统要执行什么动画

//创建一条路径

CGMutablePathRef path = CGPathCreateMutable();

//设置一个圆的路径

CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));

keyAnima.path = path; //可以通过path属性，让layer在指定的轨迹上运动。

//有create就一定要有release

CGPathRelease(path);

//1.2...1.5 同上

//2.添加核心动画

[self.customView.layer addAnimation:keyAnima forKey:@"key"];

//3 动画停止

- (void)stopOnClick:(UIButton *)button {

//停止self.customView.layer上名称标示为key的动画

[self.customView.layer removeAnimationForKey:@"key"];

//[self.customView.layer removeAllAnimations];//移除全部动画

}

4、抖动（旋转）

#define angle2Radian(angle)  ((angle)/180.0*M_PI)

//1.创建核心动画

CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];

keyAnima.keyPath = @"transform.rotation";//旋转

//设置动画时间

keyAnima.duration = 0.1;

//设置图标抖动弧度

//把度数转换为弧度  度数/180*M_PI

keyAnima.values = @[@(-angle2Radian(4)), @(angle2Radian(4)), @(-angle2Radian(4))];//向左向右偏转一个弧度（4），产生抖动的视觉效果

//设置动画的重复次数(设置为最大值)

keyAnima.repeatCount = MAXFLOAT;

keyAnima.fillMode = kCAFillModeForwards;

keyAnima.removedOnCompletion = NO;

//2.添加动画

[self.iconView.layer addAnimation:keyAnima forKey:nil];

四、转场动画 CATransition

CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点

UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果

属性解析:

type：动画过渡类型

subtype：动画过渡方向

startProgress：动画起点(在整体动画的百分比)

endProgress：动画终点(在整体动画的百分比)

1、界面

界面搭建 & 实例效果图

2、代码

@property(nonatomic,assign)intindex;

@property (nonatomic, strong) UIImageView *iconView;

- (IBAction)preOnClick:(UIButton *)sender;

- (IBAction)nextOnClick:(UIButton *)sender;

- (void)viewDidLoad{

[super viewDidLoad];

self.index=1;

}

//上一张

- (IBAction)preOnClick:(UIButton *)sender {

self.index--;

if (self.index<1) {

self.index=7;

}

self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];

//创建核心动画

CATransition *ca=[CATransition animation];

//告诉要执行什么动画

//设置过度效果

ca.type=@"cube";

//设置动画的过度方向（向左）

ca.subtype=kCATransitionFromLeft;

//设置动画的时间

ca.duration=2.0;

//添加动画

[self.iconView.layer addAnimation:ca forKey:nil];  }

//下一张

- (IBAction)nextOnClick:(UIButton *)sender {

self.index++;

if (self.index>7) {

self.index=1;

}

self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];

//1.创建核心动画

CATransition *ca=[CATransition animation];

//1.1告诉要执行什么动画

//1.2设置过度效果

ca.type=@"cube";

//1.3设置动画的过度方向（向右）

ca.subtype=kCATransitionFromRight;

//1.4设置动画的时间

ca.duration=2.0;

//1.5设置动画的起点

ca.startProgress=0.5;

//1.6设置动画的终点

//    ca.endProgress=0.5;

//2.添加动画

[self.iconView.layer addAnimation:ca forKey:nil]; }

五、组动画 CAAnimationGroup

1、简介

CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行

属性解析：

animations：用来保存一组动画对象的NSArray

默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间

2、代码

// 平移动画

CABasicAnimation *a1 = [CABasicAnimation animation];

a1.keyPath = @"transform.translation.y";

a1.toValue = @(100);

// 缩放动画

CABasicAnimation *a2 = [CABasicAnimation animation];

a2.keyPath = @"transform.scale";

a2.toValue = @(0.0);

// 旋转动画

CABasicAnimation *a3 = [CABasicAnimation animation];

a3.keyPath = @"transform.rotation";

a3.toValue = @(M_PI_2);

// 组动画

CAAnimationGroup *groupAnima = [CAAnimationGroup animation];

groupAnima.animations = @[a1, a2, a3];

//设置组动画的时间

groupAnima.duration = 2;

groupAnima.fillMode = kCAFillModeForwards;

groupAnima.removedOnCompletion = NO;

[self.iconView.layer addAnimation:groupAnima forKey:nil];

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343

推荐阅读更多精彩内容