IOS 完全自定义缓冲函数

最近在阅读《IOS核心动画高级技巧》这本书,里面说到了完全自定义缓冲函数的方法。里面讲解并不是很详细,我在这里说一下自己的见解。具体情节,大家可以阅读这本书,这篇文章可以参考那本书的10.8的Demo。

在Core  Animation中,动画是作用在CALayer上的。为了能更加模拟使动画更加能模拟现实生活,比如说,汽车在路上,汽车是经过加速,匀速,然后减速到达终点的,所以动画也应该具有这样类似的属性,有时候动画还必须具备弹簧的感觉,即汽车还有时候会驶过终点,然后再回来终点。为了实现这种效果,Core  Animation定义了CAMediaTimingFunction这个属性,称之为缓冲函数,而且Core Animation还提供一系列的标准函数给我们使用,这些标准函数有:

kCAMediaTimingFunctionLinear

kCAMediaTimingFunctionEaseIn

kCAMediaTimingFunctionEaseOut

kCAMediaTimingFunctionEaseInEaseOut

kCAMediaTimingFunctionDefault

在这里,将说明自定义缓冲函数的原理,并不会对这些标准缓冲函数加以说明。这些标准函数也没有实现弹簧的感觉,即不能越过终点。

在完全自定义缓冲函数中,我们将放弃CAMediaTimingFunction属性。利用CAKeyframeAnimation可以自己做一个类似缓冲函数的动画来。

首先我们必须明白,动画其实是不断变化的数据,所以我们控制这些数据的变化,让数据按我们指定的速率和加速度来增长或者减少,我们就实现了缓冲动画。在这里引申出两个概念:动画时间数据和动画数据。动画时间数据是动画运行需要一个时间段,时间段里面每个时间点就是动画时间数据。动画数据是要改变的CALayer的属性值在每个动画时间里应该拥有的数值。说白了,动画数据y跟动画时间数据x形成的函数关系就是缓冲函数了。如果我们清楚了解到我们所需要的动画数据跟动画时间数据的关系,我们就可以利用动画时间求出动画数据,然后我们将动画数据存储在CAKeyframeAnimation的values数组里,我们便可以实现缓冲动画了。

在这里,我将讲解《IOS核心动画高级技巧》10.8的Demo。


上图方法中,我们先用变量存储我们动画数据的开始点(fromValue)和结束点(toValue)。然后存储动画运行的总时间。在for循环里面,我们利用动画数据和动画时间数据的函数关系求出所有的动画数据,并且存储在frams数组中,最后传递给CAKeyframeAnimation的values数组里面。现在我们就要看看bounceEseOut()函数和-interpolateFromValue:toValue:time:方法是怎么回事?首先来看一下-interpolateFromValue:toValue:time:方法:


-interpolateFromValue:toValue:time:方法会返回一个NSValue对象,这就是我说的动画数据了。-interpolateFromValue:toValue:time:方法使用了interpolate函数。interpolate函数是求出动画数据的关键,interpolate函数很简单,根据time,fromValue和toValue求出动画数据,这个fromValue和toValue是一直不变的,关键点就在于这个time,这个time也不是我说的动画时间数据。至此我应该说明一下哪个是动画时间数据x了:

float time =1/(float) numFrames * i;

我们可以想象,动画总的运行时间是一个时间段,里面每个时间点就是我们所要动画时间数据了,而上面提供了60个这样的时间点,这些时间点就是动画时间数据了,从上可以看出动画时间数据的范围是0到1。而在interpolate函数中的time只是包含了缓冲函数关系的数据(这些数据的范围是0到1),根据fromValue和toValue放大一下缓冲函数关系的数据就是动画数据了。

interpolate函数中的time来源于bounceEseOut()函数,而这个bounceEseOut()函数就是我们所需要定义的缓冲函数啦。我们可以简单看出,缓冲函数有4个段。根据书中10.8的Demo的动画现象,第一段是弹球掉到终点动画,第二三段是弹球在反弹的动画,第四段是弹球弹完后掉到终点的动画。

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

推荐阅读更多精彩内容