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

相关文章

来自专栏腾讯大数据可视化设计团队的专栏

遇见大数据可视化 :图表设计 ( 一 )

在大数据迅速发展的时代,研究数据可视化的价值显而易见。本篇文章主要对数据可视化中的基本元素:基础图表进行相关探索。

1.7K4
来自专栏数据小魔方

像电影一样记录数据可视化

之前写过两篇关于使用animation包来制作时间维度动态可视化GIF图,效果还是很棒的,最近又发现了一个好玩的包——gganimate,它也是主打制作时间维度...

2665
来自专栏PaddlePaddle

【AI核心技术】课程八:卷积网络简介

UAI与PaddlePaddle联合推出的【AI核心技术掌握】系列课程持续更新中!

663
来自专栏程序你好

微软发布开源跨平台机器学习框架ML.NET 0.2版本

上个月在Build 2018年微软发布了ML.NET 0.1,一个跨平台的开源机器学习框架。今天又发布了ML.NET 0.2。这个版本侧重于添加新的ML任务,比...

562
来自专栏新智元

Kaggle放大招:简单几步实现海量数据分析及可视化

【新智元导读】近期,Kaggle发布了新的数据分析及可视化工具——Kaggle Kerneler bot,用户只需上传数据集,便可用Python为用户自动获取相...

883
来自专栏大数据智能实战

DrQA实践

2017年七月份Facebook开源了其开放域问答系统DrQA的代码。关于DrQA,还有一篇2017年发表在ACL上的论文《Reading Wikipedi...

2565
来自专栏专知

【干货】如何为论文设计精致的插图

【导读】论文是经过数月或数年实验得到的数据的积淀。 但是,原始数据或描述本身并不能成为好的期刊文章。 数据可视化工具和免费绘图软件能帮助科学家阐述他们的工作。 ...

1353
来自专栏小白课代表

有了它,图片放大100倍不是梦

1074
来自专栏何俊林

OpenGL ES总结(一)OpenGL 初识

导读:OpenGL是在图形图像中,非常优秀的渲染库,文中Demo下载地址:https://github.com/hejunlin2013/OpenGL31,看下...

2527
来自专栏iOSDevLog

Core ML Tools初学者指南:如何将Caffe模型转换为Core ML格式

1293

扫码关注云+社区