专栏首页MelonTeam专栏[译]Android Interpolator详解

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

相关文章

  • iOS 事件体系知识及原理小记

    基本知识点: 0 UITouch 当每一个指尖在屏幕上触发一次触摸事件时,系统就会生成对应一个UITouch对象,用于记录当前触摸的状态,主要包含运动相位、...

    MelonTeam
  • Android旁门左道之动态替换系统View类

    导语 本文讲述如何通过替换系统View类的方法,定位一个特殊机型问题 作者: yarkeyzhang  2017.6.29 一,ImageView...

    MelonTeam
  • 一种下载管理方案的设计与实现

    导语: 4G时代流量资费大幅下降,各种“WBQ”卡惊艳出世——在此背景下,下载对于移动端已不再是一种昂贵的高成本行为。同时EMMC、UFS等存储介质的发展也...

    MelonTeam
  • Android 中的属性动画 --- 2(插值器)

    在上一篇文章中,我们使用 ValueAnimator 这个类来实现了操作 View 对象的 height 属性从而实现了动画形式的显示和隐藏 View 控件。我...

    指点
  • Flutter动画【2】

    在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的W...

    flyou
  • 第73天:jQuery基本动画总结

    var btn = document.getElementById(“bt n”);

    半指温柔乐
  • Baozi Training Leetcode solution 1169: Invalid Transactions

    FB最近员工跳楼的员工被证实是一位中国员工。死者为大,具体原因目前也不清楚,希望大家也不要过多的猜测。在这里,包子君希望大家一定要学会处理工作和生活中的压力,没...

    包子面试培训
  • 又陷入知识盲区了,面试被问Redis事务,我差点脸都“绿”了

    前几天有读者说自己面试被问到Redis的事务,虽然不常用,但是面试竟然被问到,平时自己没有注意Redis的事务这一块,面试的时候被问到非常不好受。

    Java程序猿阿谷
  • VueJS生命周期

    Vue在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。那么,在这些vue钩子中,vue实例到底执行了那些操作,我们先看下面执行的例...

    cwl_java
  • 人群分析--Beyond Counting: Comparisons of Density Maps for Crowd Analysis Tasks

    Beyond Counting: Comparisons of Density Maps for Crowd Analysis Tasks - Counting...

    用户1148525

扫码关注云+社区

领取腾讯云代金券