1.动画的基础概念的了解

1.图层的结示意图如下:

image.png

越底层的封装越轻量级!!

2.CALayer的介绍

1.为什么会先说的CALayer呢?因为CAAimation实际上操作的都是Layer层。
所以不知道的CALayer会很头疼的,知道的偷学去冲杯咖啡吧。

1.CALayer的学习资料

CALayer类管理基于图像的内容,并允许您对该内容执行动画。
通常使用图层为视图提供后备存储,但是也可以在没有视图的情况下使用图层来显示内容。
图层的主要工作是管理您提供的视觉内容,但图层本身具有可设置的视觉属性,例如背景颜色,边框和阴影。
除了管理可视内容之外,该层还维护用于在屏幕上呈现该内容的内容的几何信息(例如其位置,大小和变换)。
修改图层的属性是如何在图层的内容或几何体上启动动画。
一个图层对象通过采用CAMediaTiming协议来封装一个图层及其动画的持续时间和起搏,
如果图层对象是由视图创建的,则视图通常自动将其自身指定为图层的委托,并且不应更改该关系。对于您自己创建的图层,您可以分配委托对象并使用该对象来动态提供图层的内容并执行其他任务。
一个图层也可以有一个布局管理器对象(分配给layoutManager属性)来分别管理子视图的布局。

1.1.CALayer的总结:CALayer的用来的英文绘制、渲染图形的。

2.CALayer和UIView的区别和联系

1.事实上所有的UIView以及其子类图形的绘制,UIView下有一个层的属性,这个层就是真正的uiview所要展示的东西,然而之所以要将CALayer封装成UIView则是为了给了其添加事件响应。
2.因为CALayer继承是NSObject的,所以它不具备响应的,而UIView是继承UIResponder的,UIResponder本身可以提供事件响应,在用CALayer给他绘制一个图像,那就一个具有响应的事件的对象就诞生,他就是我们的uiview的
3.当我们创建一个UIView的对象时候,系统会自动为我们创建一个CALayer的对象,这个对象就是UIView的层属性。

3.CALayer的有具体有什么属性呢?

1.前面有说过,层层负责绘制和渲染,那么图形的基本属性他是一定有的
2.CALayer有bounds,position,frame的属性,他呢,其实就是UIView的中界,中心,帧的映射事实上,我们在层中一般只操作范围和位置两个属性。由于有着对应关系,所以这个理解起来就相对容易,我就不展开讲解了。
3.CALayer的还有一个非常重要的属性anchorPoint,即锚点。说起来这个概念还是真难解释,锚点就好像是体心,一个物体抽象成一个点的对象。还记得物理中的质点么?我们操作属性,比如移动,旋转,缩放等等都是以锚点作为参考点的。他是一个CGPoint类型的对象,他的x、y取值范围都是0~1。数值就是从锚点到layer的左上角(类比UIView的起源)的横向/纵向距离占层得宽度/高度的比例。
4.contents,寄宿图。事实上这个属性我们操作的也很少,不过还是可以解释一下的。他可以看做是当前图层的背景图片。就是在当前图层的背景展示一张图片。也就是说你甚至可以用一个的UIView展示一张图片了,就是这样。不过你别看他的类型是id,可代表你是他传的什么对象都可以。事实上你只能传CGImageRef类型的数据进去。他的id类型是为了配合OS X系统的。哦,你说为什么不能传UIIamge?是这样的,CALayer是在QuartzCore框架下的,他是可以跨平台的,也就是在iOS和OS X上都可以,所以他当然不能让你传入UIKit下的对象了CALayer的所有属性都不能传入UIKit的对象。
5.ransform,仿射变换啦,这个东西其实挺多能讲的,那套图像变换的原理挺有意思的,不过我矩阵真的不会算了=。=延展的东西数学好的同学们自己看吧,其实想用还是挺简单的。
6.cornerRadius、masksToBounds。这两个属性比较常用啦,切圆角时候我们用的属性。
7.opacity,类比的UIView的阿尔法。
8.shadowOpacity、shadowColor、shadowPath、shadowOffset、shadowRadius,这几个阴影相关的属性。这里需要注意的是shadowOpacity的默认值现在是0。也就是说默认效果下你是看不到任何阴影效果的,想要实现阴影想过请先更改shadowOpacity为一个非0得小于等于1的值。还有一点就是由于阴影是图层外的延展效果,要想看到阴影效果请设置masksToBounds属性为No。
9.borderColor、borderWidth,这是边框相关的属性.borderWidth默认值是0。
10.mask,这也是个遮罩属性有趣又有用的属性,。可以以一个layerA作为另一个layerB的遮罩,即layerB.mask = layerA。那么作为遮罩的layerA中的透明区域将被过滤掉,layerB只显示layerA的非透明区域。借助这个属性可以实现很多神奇的效果,比如歌词,图像展开等

3.CAAnimation

1.CAAnimation的介绍:

1.CAAnimation是一个抽象动画类。它为CAMediaTiming和CAAction协议提供了基本的支持。要为Core Animation图层或Scene Kit对象设置动画效果,请创建具体子类CABasicAnimation,CAKeyframeAnimation,CAAnimationGroup或CATransition的实例。

3.1CAAnimation的总结:

CAAniamtion是一个抽象类,遵循着CAMediaTiming和CAAciotn两个协议。通过他的4个子类,我们可以实现很多绚丽的动画效果。

2.CAAnimation的几个属性介绍:

2.1 timingFunction属性:指定动画的节奏,动画交替快慢交替

1.kCAMediaTimingFunctionLinear //线性节奏,就是匀速
2.kCAMediaTimingFunctionEaseIn //淡入,缓慢加速进入,然后匀速
3.kCAMediaTimingFunctionEaseOut //淡出,匀速,然后缓慢减速移除
4.kCAMediaTimingFunctionEaseInEaseOut //淡入淡出,结合以上两者
5.kCAMediaTimingFunctionDefault //默认效果

2.2delegate属性:设置代理方式

-(void)animationDidStart:(CAAnimation *)anim;
- (void)animationDidStop :( CAAnimation *)动画完成:(BOOL)标志;

一个是动画的开始的代理,一个是动画结束的代理。
注意的是,结束的代理中,有一个标志,他的意思是如果动画正常播放的完成的话,标志为YES,如果没有播放完成或者被移除否则返回否.

2.3 removedOnCompletion属性:是否在播放完成后移除,这是一个非常重要的属性,有的时候我们希望动画播放完成,但是最终的播放效果是,这个属性一定要改成NO,

遵循着CAMediaTiming协议,所以他自然也有持续时间,BEGINTIME等一些属性。

2.4 beginTime属性:动画开始的时间,准旗来说应该说是停滞的时间,就是当你将动画加载层中后滞后多长时间开始播放。

/ *该对象的开始时间,相对于其父对象,如果

适用。默认为0. * /

这个属性很重要,要重点的介绍下,Begintime的属性是注释,这个beginTime是和父对象有关的
由于CALayer和CAAnimation都遵循了CAMediaTiming协议,所以他可以作为我们动画对象的父对象,
如果你将动画添加在一个动画组(CAAnimationGroup)中,那么确定,你直接按照下面的写法就好了。
animation.beginTime = beginTime;

2.5 duration属性:动画持续时间,简单的概念,就一笔带过了

2.6repeatCount,autoreverses 都是基本的概念,看单词就知道了

2.7speed属性:这个表示的是当前的对象的时间流速度,简单来说,如果是speed is 2 duration是3 那么经过1.5秒, .s = v * t , 3/2 = 1.5;

2.8 timeOffset属性 是表示我将动画的第几秒开始播放,如果一个duration为3的动画。timeOfffset = 2. b,表示我的动画从第二秒开始播放,

2.8 fillMode 属性 : 播放结束后的状态

kCAFillModeForwards //保持结束时状态
kCAFillModeBackwards //保持开始时状态
kCAFillModeBoth //保持两者,我没懂两者是什么概念,实际使用中与kCAFillModeBackwards相同
kCAFillModeRemoved //移除

4.CABasicAnimation的介绍

1.前文说过,CAAnimation是一个抽象类,想要实现动画效果,就是使用他的四个子类去实现代码的功能!!!
2.首先介绍CABasicAnimation的使用方法
3.一看这个名字就知道这是一个基础的动画效果

4.1CABasicAnimation实现的动画的使用

CABasicAnimation用来创建基于两个状态的动画,你只需要给出两个状态,一个初始状态一个终止状态,系统自动为你将中间的动画补全。

UIView * redView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
CABasicAnimation * animaiton = [CABasicAnimation animationWithKeyPath:@"position"];
animaiton.removedOnCompletion = NO;
animaiton.fillMode = kCAFillModeForwards;
animaiton.duration = 2;
animaiton.toValue = [NSValue valueWithCGPoint:CGPointMake(400, 400)];
[redView.layer addAnimation:animaiton forKey:nil];

运行的效果如下:


image.png

讲解下刚才动画的执行的原理的讲解下:

1.首先创建了一个对象动画,keypath就是我们要修改的路径
2.CAAnimation都是对CALayer进行展示动画的,可以查看CALyer是否是支持东西 ,后面有一个属性叫做 animatable,有了这个的,就是支持动画的属性
3CAAnimation中的toValue赋值,这个是什么东西呀,toValue,fromValue,byValue, fromValue 从指定初始状态,toValue:就是终止状态,byValue: 通过就是状态的增量,这三个状态不能全部为空,不然这个状态就没有指定了。
4.最后一句就是将动画填入到层中,实际开发中建议填写的key和key不可以重复,

完善之后的代码:

CABasicAnimation * animaiton = [CABasicAnimation animationWithKeyPath:@"position"];
animaiton.removedOnCompletion = NO;
animaiton.fillMode = kCAFillModeForwards;
animaiton.duration = 2;
animaiton.beginTime = CACurrentMediaTime() + 1;
animaiton.repeatCount = MAXFLOAT;
animaiton.toValue = [NSValue valueWithCGPoint:CGPointMake(400, 400)];
[redView.layer addAnimation:animaiton forKey:nil];

效果如下:


延时.png

我们看到我添加的这个延时语句和同时改变了repeatCount无限的循环滚动,

CABasicAnimation * animaiton = [CABasicAnimation animationWithKeyPath:@"position"];
animaiton.removedOnCompletion = NO;
animaiton.fillMode = kCAFillModeForwards;
animaiton.duration = 2;
animaiton.toValue = [NSValue valueWithCGPoint:CGPointMake(400, 400)];
[redView.layer addAnimation:animaiton forKey:nil];
animaiton.beginTime = CACurrentMediaTime() + 1;
animaiton.repeatCount = MAXFLOAT;

发生的变化就是重复和延时都放到了添加动画之后的代码中去 ,这个时候动画的执行是什么样子呢:

image.png

延时和重复都没有了,
原因:

因为当你调用addAnimation:forKey:这句时,其实系统是对你传入的animation进行了一次copy,然后把copy的这份添加在图层上这时你再改动画当然是不能更改动画效果的了。

这里同时也要引出一点,当你动画加入层以后,你就无法在改动画的效果
其他的属性都是字面上面意思了

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

推荐阅读更多精彩内容