[译]Android 动画的灵魂—— Interpolator

用定制的非线性定时曲线改善你的动画

在现实世界中的运动是非线性的。(当你穿过街道时,你只要略微将你盯着手机的眼睛瞄一眼街道就足够保证你不会被车撞到。)当我们走路的时候,我们在加速。当我们停止的时候,我们慢慢减速到 0(除非我们被车撞了,这样我们会体验到我们朝着另一个方向突然加速)。当我们下落的时候,重力使我们加速下落,当我们跳起的时候,它又会降低我们的上升速度。无论如何,我们无法在整个运动中保持一个恒定的移动速度。

所以作为人类,当我们看到屏幕上的运动时(我们正在观看手机上的动画,并没有留意到那些正在靠近我们的车辆的时候。),我们期望它也是同样的非线性,因为这样会让人感觉更自然。通常来说,我们在应用里尝试实现的自然交互,它是用来帮助用户更好的理解这些应用里的虚拟世界究竟在发生什么。不要尝试用你奇特的动画技巧让他们惊奇;给他们感受起来很自然的动画,以便于他们可以更容易的使用你的应用然后完成他们需要做的事情。

Android Interpolation

从一开始, Android 就已经提供了通过它的 Interpolator 实现来制作非线性动画对象的能力。事实上,默认的动画通常是加速进入和减速退出运动中的一个。更加重要的是,Android 也为开发者提供了改变默认运动的能力,以此来提供其他类型的速度变化。举个例子,你可以使你的动画快速的开始然后减速退出。或者,慢慢的开始然后逐渐加速。自从 Lollipop 版本 (API 21)发布了以后,Android 又提供了基于路径的定时曲线来完成更加复杂和灵活的控制。甚至于,如果你想要凸显你的奇特,你可以使用线性 interpolation (但是请不要这样做)。

有了这么多的选项,那么问题来了:你应该为你的动画使用哪一个呢?

如此多的选择!

在今年的 Google I/O 大会上,一个开发者靠近我问道:“我应该使用什么类型的 interpolation 来让一个 text 元素从边上滑入?”

这是一个好问题,我建议更多的开发者应该为他们自己的应用问一下这个问题。

不幸的是,这个问题的答案是一个令人并不满意的模糊答案,“看情况”。这取决于你,你的应用,这个动画的上下文,你的用户,以及许多其他的因素,没人可以简单的为你做决定。确实是有某种程度上较好与较坏方式的判定(例如:不要为移动的物体使用 LinearInterpolator ,让你的动画尽可能的快)。但是并没有可以通用的“正确”答案。

我的推荐(确切答案的一个微不足道的替代品)是使用不同的 interpolators,然后在他具体的情况下试验下,选择感觉最好的那个。或者,更一般的说,写一个简单的测试应用,允许他使用不同 interpolator,然后简单的比较下。

我意识到这是我们能为他(也是为每个人)提供的东西。这不是一个难写的应用,但是用来比较内置的interpolator还是很有用的,对开发者来说它应该是很方便的,无论是使用或者是修改他们任意的定制需求。

所以下面的就是:

InterpolatorPlayground

InterpolatorPlayground 实战

介绍下 InterpolatorPlayground,这是一个简单的 Android 应用,你可以使用它来选择几个标准 interpolator 中的一个,然后实验看看它们是如何影响一个动画的。你可以改变动画的持续时间以及 interpolator 的构造参数。通过给 UI 中各种对象添加 interpolation 动画,你可以使 interpolation 曲线和产生的影响可视化。最后,你可以为两个 PathInterpolator 选项(平方和立方)拖动控制点来看看如何使用这个具体的类创建非常个性和灵活的定时曲线。

你也可以运行一些有趣的(尽管用处不大) interpolator,例如反弹和冲出(主要是因为他们在运行的时候看起来很有趣)。

一旦你决定为你的应用使用一个你喜欢的动画,简单的记下 UI 中的参数,然后在你的代码里使用那些参数创建适当的 Interpolator。

它是怎样运行的

你可以在你的代码里插入一个 Interpolator 之后你就可以调用它。你可以不用理解其中的细节;你真正需要的是你正在寻找的运动效果。

但是如果你不关心它是如何运行的,那为什么你还要选择成为一名程序员呢?细节才是真正有趣的地方。

interpolator 运行的方式,或者更具体的说,interpolator 影响动画定时曲线的方式,是通过改变当前完成时间的百分比来进行的。在 Android 中的每个动画都设置了一个持续时间(默认的时长是 300 毫秒)。在动画持续时间内的任意一个时间点,系统计算出已经运行了多长时间,然后调用 animation 让它根据之前得到的时间来计算新的 animated 值。运行时间可以被表达成一个比例因子(0 是开始,1 是结束)。举个例子,一个 animation 正进行到中间时刻,那么它当前完成的比例因子就是 0.5,它的计算值就处于它的起始值和结束值的中间。

但是我们没有直接传递那个比例因子,替代的我们通过一个 Interpolator 传递比例因子,这个 Interpolator 把当前完成的比例因子作为输入然后返回另一个比例因子作为输出。被插入的比例因子被我们传递给 animation 对象进行计算。

所以为了改变一个 animation 对象的定时曲线,我们只需要提供一个功能,它把一个当前已完成的比例因子转换成另一个比例因子,然后使用这个新的比例因子来计算 animation 值。

举个非常简单的例子,假设我们创建了一个 Interpolator 通过返回比例因子的相反值来反转 animation,它看起来是这样的:

 public class ReverseInterpolator implements Interpolator {
    @Override 
    public float getInterpolation(float fraction) {
        return 1 - fraction;
    }
}

这个 interpolator 会使 animation 在开始的时候计算它的结束值(当输入的比例因子为 0 的时候,被插入的比例因子则是 1 )然后在结束的时候计算开始值(当输入比例因子为 1 的时候,被插入的比例因子则是 0 ).它会适当的改变那些位于结束值和起始值中间的比例因子。

Android 中内置的 Interpolator 类使用类似的功能,简单的(例如 LinearInterpolator,它只是简单的返回输入值)和更加复杂的(例如 PathInterpolator,它使用平方、立方或者贝塞尔曲线决定返回值)都被用来计算比例因子,这样使得丰富多彩的各种定时曲线都能符合大部分期望。如果你没有找到你想要的,实现你自己的 Interpolator 也是很容易的。

在此同时,把视线从你的屏幕上移开。有辆车正在开过来。

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

推荐阅读更多精彩内容

  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,699评论 0 10
  • Animation Animation类是所有动画(scale、alpha、translate、rotate)的基...
    四月一号阅读 1,906评论 0 10
  • 1.对老张提到的管理是盯出来的深有体会。一个事情安排下去了,不代表这个事情就做到位了。就拿今年门展的样品来讲,当时...
    姜能伟阅读 397评论 0 2
  • 文/芋郎公子 我开始写诗的时候,主要是觉得诗对爱情的表达方式特别。唯美,自由中又包含着形式美和音韵美,分开来看,诗...
    灵兰问道阅读 204评论 0 4
  • 【不负责任的杂谈系列001】 昨天去医院缴了费用忘记拿药,加上坐反了公交花的时间,来回一共四个小时。中途转乘,好几...
    地球不在乎耶阅读 337评论 0 0