[译]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 条评论
登录 后参与评论

相关文章

来自专栏逍遥剑客的游戏开发

延迟渲染的G-Buffer压缩

1123
来自专栏iOSDevLog

ARKit介绍

Apple在WWDC17上宣布了一个名为ARKit的新iOS框架。它是一个“允许您轻松为iPhone和iPad创建无与伦比的增强现实体验”的框架。该框架随iOS...

682
来自专栏九彩拼盘的叨叨叨

零基础学前端 学习路线

601
来自专栏WeTest质量开放平台团队的专栏

移动平台 Unity3D 应用性能优化(下)

下篇:一些关于移动平台上Unity3D的性能优化经验,供分享。

3080
来自专栏何俊林

通过GPUImage实现40+种滤镜与实时美颜功能

推荐一个滤镜和美颜功能实现项目,包含40+种滤镜与实时美颜与后处理美颜功能,非常强大。 相机预览模式 示例见:com.seu.magiccamera.activ...

4008
来自专栏落影的专栏

视频直播与虚拟现实的渲染 - OpenGL ES

这是一篇OpenGL ES的学习笔记,介绍图像绘制里面用到的概念,学习OpenGL ES的基础知识备忘录。 教程 OpenGLES入门教程1-Tutorial0...

2778
来自专栏跟着阿笨一起玩NET

.NET3.5 GDI+ 图形操作1

      前言: 本文章抄袭自本人刚刚买的《ASP.NET 3.5从入门到精通》这本书,此书介绍在 http://www.china-pub.com/4499...

452
来自专栏iOSDevLog

ARKit示例 - 第3部分:添加几何和物理乐趣

在上一篇文章中,我们使用ARKit来检测现实世界中的水平平面,然后将这些平面可视化。在本文中,我们现在将开始为我们的AR体验添加虚拟内容,并开始与检测到的平面进...

821
来自专栏HTML5学堂

一步步教你弹性框架-中篇

HTML5学堂:本文继续为大家讲解弹性框架,在前一篇文章当中,我们实现了最基本的来回运动,在本文当中我们将基于前者,继续书写我们的代码。主要包括缓冲效果、有摩擦...

3374
来自专栏量子位

TensorFlow新功能「AutoGraph」:将Python转换为计算图

昨天,TensorFlow推出了一个新功能「AutoGraph」,可以将Python代码(包括控制流print()和其他Python原生特性)转换为Tensor...

993

扫码关注云+社区