CoreAnimation 详解

CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间、速度的控制,本身实现了CAMediaTiming协议。

CAPropertyAnimation:属性动画的基类(通过属性进行动画设置,注意是可动画属性),不能直接使用。

CAAnimationGroup:动画组,动画组是一种组合模式设计,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。

CATransition:转场动画,主要通过滤镜进行动画效果设置。

CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态。

CAKeyframeAnimation:关键帧动画,同样是通过属性进行动画参数控制,但是同基础动画不同的是它可以有多个状态控制。

基础动画、关键帧动画都属于属性动画,就是通过修改属性值产生动画效果,开发人员只需要设置初始值和结束值,中间的过程动画(又叫“补间动画”)由系统自动计算产生。和基础动画不同的是关键帧动画可以设置多个属性值,每两个属性中间的补间动画由系统自动完成,因此从这个角度而言基础动画又可以看成是有两个关键帧的关键帧动画。


关系图


1.  CABasicAnimation - 基础动画

下面是个scale 缩放的例子:

 CABasicAnimation *scaleAnimation = [CABasicAnimation  

animationWithKeyPath:@"transform.scale"];

// 从1倍放大到1.5倍

scaleAnimation.fromValue = @(1.0);

scaleAnimation.toValue = @(1.5);

//scaleAnimation.beginTime = CACurrentMediaTime()+2; //动画延迟执行时间

scaleAnimation.autoreverses = YES; //设置这个属性表示完成动画后会回到执行动画之前的状态

//这两个属性要一起设置,表示保持执行动画后的样子不变(要想fillMode有效,最好设置removedOnCompletion=NO)

//scaleAnimation.removedOnCompletion = NO;

//scaleAnimation.fillMode = kCAFillModeForwards;

//重复次数

//scaleAnimation.repeatCount = 1;

//动画时间

scaleAnimation.duration = 0.8;

scaleAnimation.delegate = self; //代理(CAAnimationDelegate)

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

暂停/开始 动画:

-(void)animationPause{

//取得指定图层动画的媒体时间,后面参数用于指定子图层,这里不需要

CFTimeInterval interval=[self.customView.layer convertTime:CACurrentMediaTime() fromLayer:nil];

//设置时间偏移量,保证暂停时停留在旋转的位置

self.customView.layer.timeOffset = interval;

//速度设置为0,暂停动画

self.customView.layer.speed=0;

}

-(void)animationResume{

//获得暂停的时间

CFTimeInterval beginTime= CACurrentMediaTime()- self.customView.layer.timeOffset;

//设置偏移量

self.customView.layer.timeOffset=0;

//设置开始时间

self.customView.layer.beginTime=beginTime;

//设置动画速度,开始运动

self.customView.layer.speed=1.0;

}

代理就两个回调:

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

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

解释下 fillMode 属性以及 "animationWithKeyPath:" 这个字符串参数:

fillMode 有这四个类型:

/**

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

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

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

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

*/

"animationWithKeyPath:"  传的参数不能错,比如上面的例子是缩放,就要写  "transform.scale",如果想要设置水平或者上下移动就需要 "transform.translation.x"或者 "transform.translation.y"

具体参照下图:

可设置的属性-1


2.CAAimationGroup -  动画组合

相比于CABasicAnimation 就多了一个 用来存放动画对象的 animations  数组属性。

 下面是一个缩放平移绕y轴旋转的组合动画:

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

scaleAnimation.fromValue = @(1);

scaleAnimation.toValue = @(0.5);

scaleAnimation.autoreverses = YES;

CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];

moveAnimation.fromValue = @(0);

moveAnimation.toValue = @(100);

moveAnimation.autoreverses = YES;

CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

rotateAnimation.fromValue = @(0);

rotateAnimation.toValue = @(2*M_PI);

rotateAnimation.autoreverses = YES;

CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];

groupAnnimation.duration = 2;

groupAnnimation.autoreverses = YES;

groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];

groupAnnimation.repeatCount = MAXFLOAT;

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


3.CAKeyframeAnimation - 关键帧动画 

下面是一个利用  CAKeyframeAnimation 改变View 背景色的 小例子:

CAKeyframeAnimation *color = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];

color.values = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor blueColor].CGColor];

color.keyTimes = @[@0, @0.4,@0.6, @0.8,@1.1];

color.repeatCount = 1;

color.autoreverses = YES;

color.duration = 3;

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

简单的介绍下常用的属性:

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

keyTimes:各个关键帧的时间控制。

path:可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略 。

timingFunctions: 这个属性用以指定时间函数,类似于运动的加速度。

(1) kCAMediaTimingFunctionLinear//线性

(2) kCAMediaTimingFunctionEaseIn//淡入

(3) kCAMediaTimingFunctionEaseOut//淡出

(4) kCAMediaTimingFunctionEaseInEaseOut//淡入淡出

(5) kCAMediaTimingFunctionDefault//默认

calculationMode: 该属性决定了物体在每个子路径下是跳着走还是匀速走。

(1) const kCAAnimationLinear//线性,默认

(2) const kCAAnimationDiscrete//离散,无中间过程,但keyTimes设置的时间依旧生效,物体跳跃地出现在各个关键帧上

(3) const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效

(4) const kCAAnimationCubic//平均,同上

(5) const kCAAnimationCubicPaced//平均,同上

下面这个是 CAKeyframeAnimation 配合贝塞尔曲线 的简单例子: 

CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

//2.设置路径

//绘制贝塞尔曲线

UIBezierPath *path = [[UIBezierPath alloc] init];

[path moveToPoint:CGPointMake(self.customView.layer.position.x, self.customView.layer.position.y)];

[path addCurveToPoint:CGPointMake(55, 400) controlPoint1:CGPointMake(10, 300) controlPoint2:CGPointMake(160, 280)];

keyframeAnimation.path=path.CGPath;//设置path属性

//设置其他属性

keyframeAnimation.duration=8.0;

keyframeAnimation.beginTime=CACurrentMediaTime();//设置延迟2秒执行

keyframeAnimation.removedOnCompletion = NO;

keyframeAnimation.fillMode = kCAFillModeForwards;

//3.添加动画到图层,添加动画后就会执行动画

[self.customView.layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];

4. CATransition - 转场动画

简单的例子:

CATransition *transition = [CATransition animation];

transition.duration = 2.0f;

transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

transition.type = kCATransitionMoveIn;

transition.subtype = kCATransitionFromRight;

[self.customView.layer addAnimation:transition forKey:@"animation"];

简单的介绍下 几个属性:

type : 有四种类型:

kCATransitionFade                  //交叉淡化过渡

kCATransitionMoveIn              //移动覆盖原图

kCATransitionPush                    //新视图将旧视图推出去

kCATransitionReveal                //底部显出来

subType: 同样四种

kCATransitionFromRight;

kCATransitionFromLeft(默认值)

kCATransitionFromTop;

kCATransitionFromBottom


参考链接: http://www.cnblogs.com/wengzilin/p/4256468.html

              http://www.bubuko.com/infodetail-1000965.html

              http://www.cocoachina.com/ios/20141022/10005.html

              http://www.cnblogs.com/wengzilin/p/4250957.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容