iOS画板回放+回放暂停

这个效果是在上一个Demo中的补充,如图所示,在回放的过程中给予暂停/继续播放的效果:

回放暂停

开一篇,顺带温习CAMediaTiming

因为回放的方式采用了CABaseAnimation的方案,所以暂停/播放的效果实现也需要依赖于动画方向。当动画或者动画的宿主的speed = 0时,动画相当于暂停状态,那么我们就从这里入手即可,需要注意以下几点:
1.layer的展示层和模型层;
2.相对时间与绝对时间;
3.动画各个属性对当前layer时间线的影响,也就是t = (tp - beginT) * speed + timeOffset的理解;

1.layer的展示层与模型层:展示层可以用来获得动画状态时的数据,模型层即layer,保存的layer的基础数据。显然,如果要获得动画时的属性,我们需要调用layer.presentation()

2.绝对时间:程序运行的时候,我们能获得一个”基准“时间,这个时间不受程序内的代码影响,是一个”公平、公正“的时间线,这里使用了CACurrentMediaTime()获得绝对时间;相对时间:由于我们可以调整服从CAMediaTiming()协议的时间线,而时间线的效果又是累加的,所以就产生了相对时间,通过convertTime函数可以获得相对时间;

3.t = (tp - beginT) * speed + timeOffset用来换算得到相对时间,但这里有个比较独特的地方,speed这个属性,当timeOffset == 0 && speed == 0时,t就是0,也就是说,当你先将speed置为0再去求相对时间时是不行的,这个时候不存在相对时间。我的理解是基于speed才会产生时间线的概念。

注意以上三点之后,就没有什么特别的问题了。

那么说下CAMediaTiming()在Animation和Layer上的一些问题。

1.beginTime:这个属性在Animation和Layer上有些差别,layer默认了以绝对时间线对基准,而Animation则不是,所以你不能像下面这样:

 let colorAnimation = CABasicAnimation.init(keyPath: "backgroundColor")
 colorAnimation.fromValue = UIColor.yellow.cgColor
 colorAnimation.toValue = UIColor.blue.cgColor
 colorAnimation.duration = 5
 colorAnimation.beginTime = 2

这样是无效的,正确的方式应该是:

 colorAnimation.beginTime = CACurrentMediaTime() + 2

当Layer设置了beginTime,一个animation加载到它上面时,好像并没有出现延迟的效果。这是因为Animation加载到layer上时,实际是copy了一份加载上去,自动同步了相对时间,也就是说,如果animation没有设置beginTime,那么他的时间使用的就是Layer的时间线。看起来Layer的时间线”慢了“2秒,是参照了绝对时间,这个时间只是一个基准的参考时间,让我们有标准去做对比和转换,并不是一个真实的时间刻度,所以如果动画采用了layer的相对时间,无论layer的相对时间与绝对时间对比是快是慢,对于animation来说都没有影响,因为此时Animation使用的是相对时间。
什么情况下需要和绝对时间进行对比呢,那就是animation进行了beginTime的设置,也就是animation采用了基准时间进行动画控制,这个时候layer的beginTime就会影响到Animation的时间控制,而且这个效果还是叠加的。

  1. timeOffset是个神奇的属性,时间偏移,让我们的动画可以以某个点作为分隔,以此点作为起点进行动画:
    例如 A B C D E ,以D点作为分隔,则动画效果为D E A B C。
    这个效果单独来说没有什么太大的使用场景,但结合speed一起的话,能巧妙地作出很多复杂的手动动画效果:
    当speed = 0时,动画静止,我们可以调整timeOffset来获得某个时间点的动画效果,通过变换timeOffset,可以达到手动动画的场景。

Git:https://github.com/QiuYunxiang/DrawRecording

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