iOS 动画之CoreAnimation(CALayer)

CoreAnimation基本介绍

CoreAnimation动画位于iOS框架的Media

CoreAnimation动画实现需要添加QuartzCore.Framework

CoreAnimation基本上是Layer Animation

CoreAnimation分类

隐式动画:无需指定任何动画的类型,仅仅改变一个属性,然后CoreAnimation来决定

如何计时去做动画。

显示动画:对一些属性做指定的自定义动画,或创建非线性动画,比如沿着任意一条曲线移动。

CoreAnimation作用

与UIView动画相比,CoreAnimation能够实现更多复杂、好看、高效的动画效果。

阴影,圆角,带颜色的边框。

3D变化。

透明遮罩

多级非线性动画

CoreAnimation的三种动画

CABasicAnimation基本单一类型的动画,通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation 。

CAKeyframeAnimation帧动画主要操作属性有keyPathvalues值组合Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点、中间关键点、终点的frame,时间,动画会沿你设定的轨迹进行移动。

CAAnimationGroup组合动画 操作属性animationsCAAnimation类型的动画加入数组,以FIFO队列的方式执行。

CATransition这个就是苹果帮开发者封装好的一些动画

CABasicAnimation

三个重要的属性

@property(nullable,strong)idfromValue;动画的效果变化的初始值@property(nullable,strong)idtoValue;动画效果变化的结束值(绝对值)@property(nullable,strong)idbyValue;动画效果变化的结束值(相对值)

这三个属性必须要有一个有值,它们的值就是原来视图的放大,旋转等倍数或者角度。

fromValuetoValue不为空,动画的效果会从fromValue的值变化到toValue

fromValuebyValue都不为空,动画的效果将会从fromValue变化到fromValue+byValue

toValuebyValue都不为空,动画的效果将会从toValue-byValue变化到toValue

只有fromValue的值不为空,动画的效果将会从fromValue的值变化到当前的状态。

只有toValue的值不为空,动画的效果将会从当前状态的值变化到toValue的值。

只有byValue的值不为空,动画的效果将会从当前的值变化到(当前状态的值+byValue)的值。

想要实现不同的效果,最关键的地方在于CABasicAnimation对象的初始化方式中keyPath的设定。在iOS中有以下几种不同的keyPath,代表着不同的效果:

transform.rotation.x//以x轴为中心旋转transform.rotation.y//以y轴为中心旋转transform.rotation.z//以z轴为中心旋转transform.scale.x//缩放x轴方向transform.scale.y//缩放y轴方向transform.scale.z//缩放z轴方向,这个一般不会用到。transform.scale//x,y方向整体缩放,z方向没看到效果。

下面我们来简单的做一个动画

- (void)springAnimation{    CABasicAnimation *base= [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];/*在动画结束之后是否让动画回到原处,这个属性的默认值是YES(回到原处),此时*fillMode*是没有作用的

如果设置为NO那么就需要设置一个*fillMode*属性,就是动画结束之后的状态,如果不设置,动画也会回到原处。*/base.removedOnCompletion = NO;//动画结束之后状态的设置base.fillMode = kCAFillModeForwards;base.fromValue = @(2);//动画时长base.duration =10;//动画的重复次数base.repeatCount =100;//给base动画设置延时启动base.beginTime =2+ CACurrentMediaTime();//动画是否按原路径返回base.autoreverses = YES;//将动画添加到layer层*forKey*是给动画添加一个标记,方便删除。[self.redView.layer addAnimation:baseforKey:@"basic"];}

删除动画的方法

-(void)removeAnimationForKey:(NSString*)key;key:你需要删除的动画的名称。这个方法就是你把动画添加到那个视图的layer层上,就由那个视图的layer来调用。-(void)removeAllAnimations;这个法是删除这个视图layer层上的所有动画。

在这里简单介绍一下fillMode

注意fillMode这个属性,必须要配合下面这个属性来使用。这个属性的默认值是YES(回到原处),此时fillMode是没有作用的如果设置为NO那么就需要设置一个fillMode属性,就是动画结束之后的状态,如果不设置,动画也会回到原处。

base.removedOnCompletion=NO;

kCAFillModeRemoved这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态 kCAFillModeForwards当动画结束后,layer会一直保持着动画最后的状态 kCAFillModeBackwards这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态 kCAFillModeBoth理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

CAKeyframeAnimation

这个动画可以让你在动画的一些关键的位置来改变动画的frame以此来达到我们想要的效果。

position是描述动画视图的位置信息的,简单理解就是和视图的中心点一样,所以我们通过改变position属性,就可以改变动画的位置。

position相对应得是锚点也就是anchorPointanchorPointpositionframe这三者之间有着如下的关系。

position.x = frame.origin.x + anchorPoint.x * bounds.size.width; position.y = frame.origin.y + anchorPoint.y * bounds.size.height;

示例代码:下面是让一个视图左右震动的动画

CAKeyframeAnimation*keyFram = [CAKeyframeAnimationanimationWithKeyPath:@"position"];//layer最初的position值floatposition_x =self.redView.layer.position.x;floatposition_y =self.redView.layer.position.y;//layer向左晃动的偏移量NSValue*leftValue = [NSValuevalueWithCGPoint:CGPointMake(position_x -30, position_y)];//layer的原始位置NSValue*originValue = [NSValuevalueWithCGPoint:CGPointMake(position_x, position_y)];//layer向右晃动的偏移量NSValue*right = [NSValuevalueWithCGPoint:CGPointMake(position_x +30, position_y)];//添加每一帧的Value值[keyFram setValues:@[originValue,leftValue,originValue,right,originValue]];    keyFram.repeatCount=10;    keyFram.repeatDuration=1;//为layer层添加动画[self.redView.layeraddAnimation:keyFram forKey:@"aaa"];

CAAnimationGroup

CAAnimationGroup是一个组合动画,所谓的组合动画就是将多个动画组合到一起让它产生很炫酷的效果。

注意:所有的组合动画,它的延迟启动,重复次数等属性,同一在组里面设置,不要在单一的动画里面设置,以免出现问题。

第一步:初始化组合动画

CAAnimationGroup*group = [CAAnimationGroupanimation];

第二步创建至少两个动画

CABasicAnimation*base = [CABasicAnimationanimationWithKeyPath:@"transform.rotation.z"];/*在动画结束之后是否让动画回到原处,这个属性的默认值是YES(回到原处),此时*fillMode*是没有作用的

如果设置为NO那么就需要设置一个*fillMode*属性,就是动画结束之后的状态,如果不设置,动画也会回到原处。*/base.removedOnCompletion=NO;//动画结束之后状态的设置base.fillMode= kCAFillModeForwards;  base.fromValue= @(M_PI);//动画是否按原路径返回base.autoreverses=YES;/************************************************************************************************/CAKeyframeAnimation*keyFram = [CAKeyframeAnimationanimationWithKeyPath:@"position"];//layer最初的position值floatposition_x =self.redView.layer.position.x;floatposition_y =self.redView.layer.position.y;//layer向左晃动的偏移量NSValue*leftValue = [NSValuevalueWithCGPoint:CGPointMake(position_x -50, position_y)];//layer的原始位置NSValue*originValue = [NSValuevalueWithCGPoint:CGPointMake(position_x, position_y)];//layer向右晃动的偏移量NSValue*right = [NSValuevalueWithCGPoint:CGPointMake(position_x +50, position_y)];//添加每一帧的Value值[keyFram setValues:@[originValue,leftValue,originValue,right,originValue]];

第三步将得到的动画放入group中

group.animations = @[base,keyFram];//将group加到layer上group.repeatCount =100;group.repeatDuration =10;  [self.redView.layer addAnimation:groupforKey:@"group"];

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

推荐阅读更多精彩内容