iOS开发之动画中的时间(概况)

一、引言

在iOS开发中使用动画时,可以通过设置动画的durationspeedbegintimeoffset属性,来设置动画的时长、速度、起始时间及起始偏移。
用一个简单的例子来说明各个参数的的作用。动画很简单,一个红色的方块从左移到右边。动画的持续时间是1s,没有重复,效果如下。

原动画-w181

    
    CFTimeInterval currentTime = CACurrentMediaTime();
    CFTimeInterval currentTimeInLayer = [self.testLayer convertTime:currentTime fromLayer:nil];
    CFTimeInterval addTime = currentTimeInLayer;
    anim.beginTime = 0.3 + addTime;
    [anim setTimeOffset:0.5];
    [anim setSpeed:2];

做修改以后,效果如下:

修改以后的动画-w181

与上面相比,三处不同

  1. 动画的速度是原来的两倍。
  2. 点击开始动画的按钮,到开始动画,有一个延迟。
  3. 动画起始时,滑块的位置为中央,而不是在左边。

我们已经看到了这些属性的效果。翻阅文档,发现begintimespeed等属性是CAMediaTiming这协议的属性,并且CALayerCAAnimation都遵守了CAMediaTiming协议。
那么CAMediaTiming协议是什么呢?有什么作用呢?

二、层级时间结构

根据文档,CMediaTiming协议构建了一个层级的时间系统,并用这个层级的时间系统来协调各个layer、animation的时间。
这个协议被CAAnimationCALayer遵守,每一个遵守协议的的object对应一个time space。根据object之间的关系,不同的time space有层级关系。比如Layer A有一个subLayer B,那么Layer A对应的time space就是layer B对应的time spaceparent time space。每一个time space中时间的数值都是根据parent time space的数值,以及begintimespeed等属性,根据一定的规则来计算的。
为了便于理解层级时间系统,先看下layer在屏幕上的显示位置是如何确定的,然后做一个类比。

layer层级如上。要确定sublayer1在屏幕上的显示位置,一共分三步。

  1. 确定window layer在屏幕位置position1
  2. 根据position1及view layer的position属性,确定view layer在屏幕中的位置position2
  3. 根据position2及sublayer1的position属性,确定sublayer1在屏幕中的位置position3

与此类似,要确定sub1ayer1中的time,也要分三步。

  1. 确定window layer中的time1
  2. 根据time1及view layer的begintimeoffset等属性计算出view layer中的time2
  3. 根据time2及sublayer1的begintimeoffset等属性计算出sublayer中的time3

和确定layer的位置相比,确定时间有一些复杂,主要提现在下面两点

  1. 层级时间系统的构成复杂。
    layer tree的每一级都是CALayer,而只要遵守CAMediaTiming协议,就可以作为层级时间系统的一部分。比如CALayerCAAnimation(及其子类CAAnimationGroup)都可以作为层级时间系统的一部分。
  2. 不同层级之间时间转换规则复杂
    计算当前layer的位置时,只需要知道父layer的位置,以及当前layer的position属性。计算当前层级时间时,不仅需要知道上一个层级的时间,还需要知道当前层级的begintimeoffsetspeed等属性。转换的规则也比较复杂,要经历两次转换。从parent timeactive local time,再到basic local time

三、active local time

这次转换是为了处理当前层级的object在父层级的的时间线上的位置,以及当前层级和父层级之间时间流逝速度的关系。
和这次转换相关的属性有beginTimespeed以及timeOffset

  1. begin time
    子层级相对于父层级的起始时间。也就是父层级的时间经过多久,子层级才开始计算时间。
    比如子层级A被加入层级时间系统时,它父层级B的时间是5s,子层级A的begintime是6s,那么当它父层级的时间变为6s时,子层级才开始计算时间。
  2. speed
    子层级相对于父层级的时间流逝速度。如果speed是2,那么当父层级的时间增加了10s时,子层级的时间增加了20s(10s的2倍)。
  3. timeOffset
    为本地时间增加一个偏移。 如果timeOffset是5s,那么本地时间的起始就是5s。

parent timeactive local time有一个公式,可以用来参考。

t = (tp - begin) * speed + offset

四、basic local time

这次转换是为了处理当前层级的重放(repeat)、以及重放之前是否要倒放(play backward)等操作。
比如当前层级是一个动画(CAAnimation遵守CAMediaTiming协议),duration是1s,经过第一次转换之后的active local time是5.5s。如果动画的repeatCount是10,那么经过第二次转化以后,basic local time会是0.5s,因此当前是动画展示一半的状态。

  1. repeatCountrepeatDuration
    当前的层级要重复的次数或重复的时间,两者不可同时指定。
    以动画为例,如果指定repeatCount,那么指定了动画要重复几次。如果指定了repeatDuration,那么指定了动画重复的时间。
  2. autoreverses
    在重复之前是否要倒放。

五、文首的例子

根据这些知识,可以解释文章开始时设置参数的效果。
当动画被加到layer上时,动画对应的time space被加到层级时间系统中,是layer对应的time space的子层级。

  1. 动画的速度是原来的两倍
    设置动画的speed是2,这样子动画中的时间流逝速度时layer中时间流逝速度的2倍。当layer中时间经过0.5s时,动画中时间已经流逝了1s,动画已经完成了。(动画的duration是1s)
  2. 点击开始动画的按钮,到开始动画,有一个延迟
    我们首先得到了当前layer的时间addtime,然后把动画的begintime设置为addtime+0.3。这样子当动画被加到layer之后0.3s,layer中的时间是addtime+0.3,此时动画中的时间才开始计算,之前动画没有开始。
  3. 动画起始时,滑块的位置为中央,而不是在左边
    我们设置了动画的offset为0.5s。当动画开始时,动画对应的time space的时间是0.5s,对应动画duration的一半,即滑块位置在屏幕中央。

六、更多应用

了解了CAMediaTiming协议后,可以实现很多动画的效果。

  1. 让某一个layer上的动画停止
    设置layer的speed为0即可。
  2. 实现门打开然后关闭的效果
    实现一个门打开的动画,然后把动画的autoreverses属性设置为YES即可。
  3. layer上的若干动画依次延迟启动
    分别设置这些动画的beginTime为不同的值即可
  4. 手动控制动画的进度
    设置动画的speed为0,然后改变动画的offset即可。

苹果已经把工具给我们了,可以做出什么样的产品就看大家的想象力了。

参考

控制动画时间
控制动画时间(上文的中文版)
Time Warp in Animation

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,418评论 6 30
  • 书写的很好,翻译的也棒!感谢译者,感谢感谢! iOS-Core-Animation-Advanced-Techni...
    钱嘘嘘阅读 2,269评论 0 6
  • 转载地址:谈谈iOS Animation 零.前言 这里没有太多的代码细节,只是探索iOS动画的基本概念,以及其抽...
    木夜溯阅读 2,393评论 0 4
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,066评论 5 13
  • 1. 在协作中,你只是一个统筹者,任何的成功,都要虚心的感谢协助你完成好这些的同事们,你能做到的,他们一点都不比你...
    tree阅读 151评论 0 1