[译]Android Interpolator详解

原文地址:<https://blog.mindorks.com/understanding-interpolators-in-android- ce4e8d1d71cd>

在学习Android动画的过程中,我们都想知道到底动画插值器是个什么东西,以及到底该如何使用它。我尝试阅读Android文档来了解它,但是似乎并没有太大的帮助。所以我决定通过在一个View上面使用每个默认的动画插值器来看看他们到底是什么效果。

从左到右移动立方体

 通过观察不同的动画插值器行为的同时,我阅读了他们的具体代码实现,来了解插值器到底是如何定义动画的变化率的。

总所周知,字符串的本子是一个连续的字符序列。同理,动画其实也是一连串的图片序列(或者叫做帧序列)在一定的时间间隔下顺序播放。

每个时间点对应序列里面的一帧。每一帧之间都只是通过不同的一些动画效果(如平移、缩放、旋转、透明度等)产生了些许的差别。

插值器的作用就是在改变动画里面帧和时间的对应关系。

它将特定时间的帧替换成另一帧,替换帧可以来自过去、现在或者将来的任意一帧。具体替换后的帧是哪个取决于不同的插值器类型。

插值器是一个数学工具,它将一个原始时间作为输入,通过特定的数学公式和方程,输出具体的用来替换原来时间对应帧的帧。

为了简单期间,我们举一个线性插值器的例子。

通过线性差值器实现的平移立方体

数学方程式为:    f(x) = x

图为:

图表清楚地表明,在输入没有变化的时候,输出保持不变,动画不受影响。

但是,如果我们修改线性方程,并通过向给定输入添加一些常量小数,来定制一个线性插值器的话,动画会发生什么变化呢?

使用了自定义的线性插值器的平移立方体

它的数学方程:   f(x)= x + 0.1

图为:

现在,新的动画比原来的动画先开始,并比原来的动画先结束。因为差值器函数修改了时间对应关系。

我们再来看一个有一点点复杂的插值器:加速插值器。它使帧的速度从满到快,具有一定的加速度。

应用了加速插值器的平移立方体

它的数学方程式是:f(x)= x 2

图是:

从图中可以看出,每个相邻点的差异随着时间的推移而增加。因此,它显示加速类型的行为。

现在我们准备根据需要定制我们自己的插值器来模拟弹簧效果。

自定义弹簧插值器的平移立方体

他的方程式为:

图为:

我希望通过阅读这篇文章你能学到新的东西。

另外,我创建了一个插件项目,其中展示了不同的插值器是如何影响动画的。里面还包括了每个插值器的图形和方程式用来帮助你理解其他插值器,比如变形、过冲、反弹、循环等。

如果想查看代码:这里是Github repo链接。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

频率统计函数——FREQUENCY

今天跟大家分享一个频率统计函数——FREQUENCY函数! ▽▼▽ 在统计一组数据各数量段频数的时候,如果能够善用频率函数,工作效率将会大大提高,当然频率统计也...

3385
来自专栏慎独

Unity第三人称视角解决方案

3002
来自专栏C语言C++游戏编程

400行代码编C语言控制台界版2048游戏,编写疯子一样的C语言代码

《2048》是最近比较流行的一款数字游戏。原版2048首先在github上发布,原作者是Gabriele Cirulli。它是基于《1024》和《小3传奇》(T...

1450
来自专栏章鱼的慢慢技术路

用OpenGL绘制平滑着色的三角形与相交区域的混合着色

30710
来自专栏iOS技术

移动端地图:屏幕边沿方向指示图标

在我们打游戏的时候,队友跑出我们的屏幕可视区域外时,经常会有一个头像图标在屏幕的边沿,并且起着指示队友方向的作用。

3739
来自专栏天天P图攻城狮

Android OpenGL开发实践 - GLSurfaceView对摄像头数据的再处理

文首先对GLSurfaceView相关知识进行讲解,然后介绍Android系统如何获取摄像头数据并利用GLSurfaceView渲染到屏幕上。

3.8K10
来自专栏潇涧技术专栏

When Math meets Android Animation (1)

当数学遇上动画:讲述ValueAnimator、TypeEvaluator和TimeInterpolator之间的恩恩怨怨(1)

962
来自专栏我的技术专栏

UnityShader 表面着色器简单例程集合

7795
来自专栏菩提树下的杨过

Flash/Flex学习笔记(24):粒子效果

粒子爆炸: 仍然要用到以前的小球类,不过稍加改造 package { import flash.display.Sprite; //小球 类 publi...

1945
来自专栏葡萄城控件技术团队

WPF/Silverlight Layout 系统概述——Measure

前言 在WPF/Silverlight当中,如果已经存在的Element无法满足你特殊的需求,你可能想自定义Element,那么就有可能会面临重写Measure...

2018

扫码关注云+社区

领取腾讯云代金券