android 动画系列 (2) - interpolator 插值器

这是我这个系列的目录，有兴趣的可以看下： android 动画系列 - 目录

首先要了解为什么需要插值器，因为在补间动画中，我们一般只定义关键帧（首帧或尾帧），然后由系统自动生成中间帧，生成中间帧的这个过程可以成为“插值”。插值器定义了动画变化的速率，提供不同的函数定义变化值相对于时间的变化规则，可以定义各种各样的非线性变化函数，比如加速、减速等。

9种插值器：

AccelerateDecelerateInterpolator / 先加速再减速
AccelerateInterpolator / 加速
AnticipateInterpolator / 先蓄力，回退一小步然后加速前进
AnticipateOvershootInterpolator / 在上一个基础上超出终点一小步再回到终点
BounceInterpolator / 最后阶段弹球效果
CycleInterpolator / 周期运动
DecelerateInterpolator / 减速
LinearInterpolator / 匀速
OvershootInterpolator / 快速到达终点并超出一小步最后回到终点

上面是系统提供的9种插值器，都是系统已经定义好了的，xml 中调用方式如下：

...

说句自己的感受，这9个玩意真不好记啊，全是大段的英文单词组合啊，对于非英语母语的人真是不友好啊，因此还是要找规律记忆啊，其实大伙想想google这就是让我们学单词啊，看看里面的插值器实现的效果，加速，减速，蓄力，超出，回弹，就是这个效果的组合，记住这几个单词就行了

interpolator 插入器
accelerate 使...加速
decelerate 使...减速
anticipate 预期，提前使用。这里为啥预期会是蓄力的效果啊，费解
Overshoot 设计，超出。这个语义放这我觉得勉强合适吧
bounce 弹跳
cycle 循环

好了，这几个单词记住了，再记忆上面这几个插值器就好记了，要能从字面意思理解能实现的效果了，好了让我们来看看他的数值曲线：具体请看 9种Interpolator

1.Linear Interpolator / 线性插值器

公式: y=t

android 动画系列 (2) - interpolator 插值器_第1张图片

2.Accelerate Interpolator / 加速度插值器

公式: y=t^(2f)描述: 加速度参数. f越大，起始速度越慢，但是速度越来越快

android 动画系列 (2) - interpolator 插值器_第2张图片

3.Decelerate Interpolator / 减速插值器

公式: y=1-(1-t)^(2f)描述: 加速度参数. f越大，起始速度越快，但是速度越来越慢

android 动画系列 (2) - interpolator 插值器_第3张图片

这里写图片描述

4.Accelerate Decelerate Interpolator / 先加速后减速插值器

公式: y=cos((t+1)π)/2+0.5

android 动画系列 (2) - interpolator 插值器_第4张图片

5.Anticipate Interpolator / 蓄力插值器，先后退一段，在加速

公式: y=(T+1)×t^3–T×t2描述: 张力值, 默认为2，T越大，初始的偏移越大，而且速度越快

android 动画系列 (2) - interpolator 插值器_第5张图片

6.Overshoot Interpolator / 回弹插值器，超出目标一部分再回弹

公式: y=(T+1)x(t1)^3+T×(t1)2 +1描述: 张力值，默认为2，T越大，结束时的偏移越大，而且速度越快

android 动画系列 (2) - interpolator 插值器_第6张图片

7.Anticipate Overshoot Interpolator / 蓄力，回弹插值器

公式:

描述: 张力值tension，默认为2，张力越大，起始和结束时的偏移越大，而且速度越快;额外张力值extraTension，默认为1.5。公式中T的值为tension*extraTension

android 动画系列 (2) - interpolator 插值器_第7张图片

这里写图片描述

8.Bounce Interpolator / 弹跳插值器

公式:

android 动画系列 (2) - interpolator 插值器_第8张图片

9.Cycle Interpolator / 周期插值器

公式: y=sin(2π×C×t)描述: 周期值，默认为1；2表示动画会执行两次

android 动画系列 (2) - interpolator 插值器_第9张图片

其实循环加速器有点意思，我们来看个例子：

效果图：

android 动画系列 (2) - interpolator 插值器_第10张图片

ezgif.com-video-to-gif.gif

哈哈，是不是看着像是按钮点击抖动的效果啊，这里使用循环加速器可以代替一次重复的

上面的数值曲线上面都是带有公式的，其实插值器我们看着挺牛逼的，但是实现还是很简单的，核心就是上面数值曲线图中的公式，这就是数学的魅力啊。

自定义插值器

什么东西都是能自定义的，插值器也一样，google 提供了代码和 xml 2种方式的自定义方式。

xml 方式自定义插值器

在/res/anim文件夹下，我们可以自定义xml插值器，根标签写我们需要的插值器，然后系统提供一些可以设置的属性：

无
android:factor 浮点值，加速速率，默认为1
android:tension 浮点值，起始点后退的张力、拉力数，默认为2
android:tension 同上 android:extraTension 浮点值，拉力的倍数，默认为1.5（2 * 1.5）
无
android:cycles 整数值，循环的个数，默认为1
android:factor 浮点值，减速的速率，默认为1
无
浮点值，超出终点后的张力、拉力，默认为2

系统提供的可以修改的插值器属性我们配合上面的插值器数值图标来看就会很清晰很简单了。

我们以循环插值器为例：

xml文件

效果图：

android 动画系列 (2) - interpolator 插值器_第11张图片

ezgif.com-video-to-gif.gif

ok，是我们想要的结果，可以看到动画整体执行了2次，相当于 repratCount=3。

代码方式自定义插值器

用代码来自定义插值器就麻烦一些了，当然也更灵活啦，不过你最好还是要知道系统插值器的计算公式，要不然你也不好写不是嘛

interpolator 就是一个接口，我们可以实现Interpolator接口，因为上面所有的Interpolator都实现了Interpolator接口，这个接口定义了一个方法：float getInterpolation(float input)，此方法由系统调用，input代表动画的时间，在0和1之间，也就是开始和结束之间。

线性（匀速）插值器定义如下：

public float getInterpolation(float input) {  
    return input;  
}

加速减速插值器定义如下：

public float getInterpolation(float input) {  
    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;  
}

要是细说起插值器这块来，还要细分成插值器和估值器的。

插值器：根据时间流速计算数值变化比例，重点是数值变化的比例，而不是最终的具体数值。举例：时间来到50%时，数值变化比例是80% = 起始数值+0.8*(结束数值-开始数值)
估值器：根据插值器计算出的数值变化比例，计算最终的具体数值。为啥有这个呢，因为 view 的属性大部分是 float 的，但是也有颜色值这样 int 类型的。另外估值器还可以自定义的，经典的例子看鸿扬大神的：
Android 属性动画（Property Animation）完全解析（上）

另外插值器西乡介绍看这里 Android属性动画：插值器与估值器

参考资料

Android属性动画：插值器与估值器
Android 属性动画（Property Animation）完全解析（上）
9种Interpolator
动画第二步->ValueAnimator高级进阶：自定义Interpolator