iOS动画原理学习

iOS动画可以分为两大类:

1.系统提供的关键帧动画,用户指定关键信息,系统自动实现动画过程,对用户而言操作起来简单,譬如关键帧动画:用户指定起始位置,结束位置,动画时间,速度等就可以实现一个简单的动画

2.逐帧动画,用户自己画出每一帧的动画,系统操作方式简单,但用户的工作量不就大


逐帧动画:

周期性的绘制每一帧动画。

周期性:需要一个定时器来完成,既CADisplayLink。CADisplayLink于NSTimer类似,它是基于屏幕舒心的,既屏幕每一次刷新都会调用

绘制:不光是指覆写UIView的- drawRect:的方法来手动重绘视图,也包括修改UIView它的属性,比如位置、颜色等

iOS 的动画都是基于CALayer的,iOS 的UIView背后都有一个对应的CALayer。对UIView的修改实际上都是对背后CALayer的修改。

但如果在逐帧绘制的方法中修改了一个自建的CALayer,这个CALayer不是对应某个UIView的,需注意系统的隐式动画的影响




关键帧动画:也就是iOS里面的核心动画,了解:

初始位置,结束位置,速度,动画时间

1)位置,通过创建CAAnimation来设置动画的初始结束位置

CALayer的同一个属性值,会分别保存在模型层modelLayer,和展现层presentationLayer中。当我们修改属性值时,是修改的模型层的数值,动画时系统根据模型层的变化,生成的过渡值,是保存在展现层中的。而我们的动画实际是在展示层进行改变,当动画结束后切换到模型层的的最初值,其实不影响位置的改变。

而讲动画加入展示层的代码:- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key

接受的类型分为:

基础动画类型:CABasicAnimation

关键帧动画类型:CAKeyframeAnimation

组动画类型:CAAnimationGroup

过渡动画类型:CATransition

2)时间

动画持续时间通过CAAnimation遵守的CAMediaTiming协议设定的

3)速度

速度是通过设置CAAnimation的timingFunction实现的,这是一个CAMediaTimingFunction类的对象


隐式动画:系统自己添加的动画

当我们改变CALayer的一个可动画的属性值时,就会触发系统的隐式动画。

可动画的属性值,可以在CALayer的文档中找到,属性说明中标有Animatable的,就是可自动添加动画的属性。而UIView比较特殊,他的隐私动画默认是关闭的,而当animateWithDuration等动画方法被调用的时候隐私动画会被开启


动画事务:

创建动画事务的目的是为了操作的原子性,保证动画的所有修改能同时生效。

CATransaction就是动画事务的操作类。

在创建隐式动画的时候,系统也会隐式的创建一个动画事务,以保证所有的动画能同时进行。

除此之外,还可以显式的创建一个事务。

显式事务中可以定义事务中所有动画的运行时间和时间函数,此外,还有这个方法+ (void)setDisableActions:(BOOL)flag能显式的关闭这个事务中的 action 查询操作。



文章的目的是对:www.jianshu.com/p/13c231b76594进行学习总结,后面会有自己demo



写demo的总结:

1.动画的制造都是基于layer的,layer可以添加3D,2D来设置平移这些来添加动画。

git地址:GitHub - 969661780/CALayerDemo

2.通过核心动画CoreAnimation也就是QuartzCore来设置起点终点等动画

git地址:GitHub - 969661780/coreAnimation

3.更多的是绘图,绘图有2中方式:

  (1)  通过贝塞拉曲线结合CAShapeLayer进行绘制,一般对于一个图层进行修剪注意mask属性。而此时做动画可以通过不断删除贝塞拉曲线和绘制达到动画效果

(2)通过CoreGraphics来进行绘制,CoreGraphics可能没有贝塞拉曲线那么高效,但是可以更加处理复杂的动画,但是这个内容有点多

做了一个时钟,通过2钟方式绘制:


时钟demo:GitHub - 969661780/ClockLayerAndCoreGragh

写demo不易,记得你的mark

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

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,462评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,094评论 5 13
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,076评论 1 23
  • 什么是动画 动画,顾名思义,就是能“动”的画。 人的眼睛对图像有短暂的记忆效应,所以当眼睛看到多张图片连续快速的切...
    CoderSC阅读 1,299评论 0 1
  • 这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式。 什么是...
    胖花花阅读 26,048评论 21 243