2018-05-18—属性动画(4) 插值器Interpolator使用

这次不多扯皮了,我们上一次玩了一下估值器TypeEvaluator,通过在这个东西,我们也会用了onObject方法,可以让变换的属性变成一个对象,实现对象到对象的动画过度。

这次我就还拿上次的那个小球举例了。我们现在再看一下我们小球的例子:

这个小球确实按照我们的要求,从(100,100)到(500,500)再到(500,900),但是信息的朋友有没有发现,他这个速率是不一样的:很明显我们发现他是先加速后减速的,难道他不应该是一直匀速变化吗?这个先加速后减速的效果,就是用了我们内置的一个插值器——AccelerateDecelerateInterpolator(加速减速插值器)。

没错,我们这篇要说的就是插值器(Interpolator)。下面先看一下Interpolator的注释:

我们直接看一下它的父类TimeInterpolator:

这个解释就很简单了,插值器定义了动画的变化率,我们可以通过getInterpolation方法,来实现动画的是线性还是非线性播放。getInterpolation方法有一个input参数,这个参数范围是从0.0到1.0。他的返回值可以比0.0小,比1.0大。

我们有几个常用的继承类:

我们刚才说上面的效果是使用AccelerateDecelerateInterpolator类,那我们来看一下他的实现方法:

很简单,只是一个余弦函数,我们知道余弦函数是周期为2π的函数,值域是-1~1。

我们刚才说input的范围是0~1,所以加1之后就是1~2,*π就是π~2π。

纯手绘就不要喷了-。+,现在我们定义域是π~2π,所以值域是-1~1,我们给他进行一下伸缩,除以2 + 0.5.最后范围变成0~1。这是我们想要的结果。

现在我们返回这个值,那他返回到哪里了呢?还记得TypeEvaluator的evaluate方法吗?他的第一个参数fraction其实就是我们这里的返回值,所以我们可以这么理解:

注意):只能说fraction和input相关联,不是fraction = input;

从数学的角度理解,我们在插值器中通过接收input参数,得到自变量在每一时刻的值,然后通过我们的具体的函数逻辑,返回因变量在每一时刻的值。

上述是通过cos函数实现,我们注意到从π~3/2π的这段函数,他的斜率是在增大。而从3/2π到2π,这段斜率又减小了,所以正是我们先加速后减速的效果。

从值的角度理解,相同一段时间我们interpolate方法的返回值变化率先变大,然后又变小了。所以先加速后减速。

想必说到这里大家应该已经明白一点Interpolator的作用了。

如果不太明白,我们再来看一下线性插值器的实现:

简单粗暴,直接返回了input:

正是对应了我们这张图,他的变化率为常数,所以我们相同时间得到小球的坐标值变化也是相同的。也就是说是匀速变化。



看了这两个,我们是不是也可自己写一个插值器呢,来吧,小试牛刀一下:

偷个懒,我就直接用上次小球的案例了-。+

既然他有一个先加速后减速的插值器,那我们来写一个先减速后加速的插值器吧。因为我们要先减速后加速,所以我们需要在0~0.5这段斜率减小,在0.5~1这段斜率增大,但是我们发现三角函数中没有一整段这样的,所以我们把发分成两段来看:

第一段0~0.5,我们用sin中0~π/2这段。只是进行/2操作就得到了0~0.5.

第二段0.5~1,这段我们通过将sin中π/2~π函数先后进行伸缩,关于x轴堆成,然后平移,得到了我们想要的效果。

其实这些都是数学知识,笔者这里就不多说啦。然后我们看一下效果:

为了看的明显,我把最后一段让他重新返回(100,100)点处。

很明显,我们看到他是先加速,后减速的,现在我们对插值器Interpolator应该有所了解了吧。

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

推荐阅读更多精彩内容