[071]Interpolator的本质

王小二

发布于 2021-12-09 21:29:21

4430

发布于 2021-12-09 21:29:21

前言

写过动画的人都知道Interpolator，翻译成插入器，主要是控制动画的速度。我对他的理解Interpolator的本质就是一个函数在0到1的区间内的表现。接下来逐一分析一下安卓源码中的Interpolator，来进一步阐述我的观点。

AccelerateDecelerateInterpolator.java
AccelerateInterpolator.java
AnticipateInterpolator.java
AnticipateOvershootInterpolator.java
BounceInterpolator.java
CycleInterpolator.java
DecelerateInterpolator.java
Interpolator.java
LinearInterpolator.java
OvershootInterpolator.java
PathInterpolator.java

一、LinearInterpolator

1.1 代码注释

从注释可以看到LinearInterpolator就是属于变换的速率是匀速的。

/**
 * An interpolator where the rate of change is constant
 */

1.2 函数

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

这个函数其实简单，形参就是x，返回值就是y

y=x

1.3 函数曲线

我用https://zuotu.91maths.com/这个网址来生成函数曲线，我们只需要关注0到1的函数区间。如果把x轴当做时间，y轴当做距离，可以发现整个过程函数的斜率不变，说明做均速运动。

二、AccelerateInterpolator

2.1 代码注释

从注释可以看到AccelerateInterpolator属于开始比较慢，后面加速。

/**
 * An interpolator where the rate of change starts out slowly and
 * and then accelerates.
 */

2.2 函数

public AccelerateInterpolator() {
    mFactor = 1.0f;
    mDoubleFactor = 2.0;
}

public float getInterpolation(float input) {
    if (mFactor == 1.0f) {
        return input * input;
    } else {
        return (float)Math.pow(input, mDoubleFactor);
    }
}

默认 mFactor = 1.0f

y=x^2

2.3 函数曲线

在0到1的函数区间内，可以看到整个过程的斜率在增加，也就是说明在做加速运动。

三、AccelerateDecelerateInterpolator

3.1 代码注释

从注释可以看到AccelerateDecelerateInterpolator属于开始结束慢，但是中间快

/**
 * An interpolator where the rate of change starts and ends slowly but
 * accelerates through the middle.
 */

3.2 函数

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

y=cos((x+1)* PI) / 2 + 0.5

3.3 函数曲线

在0到1的函数区间内，可以看到整个过程开始和结束斜率小于中间段的斜率

四、AnticipateInterpolator

Anticipate翻译成中文是预期，早于...行动，感觉有点难以理解，没事我们按照三个步骤来分析

4.1 代码注释

开始的时候往回跑然后向前滑动，感觉还是很难理解。

/**
 * An interpolator where the change starts backward then flings forward.
 */

4.2 函数

public AnticipateInterpolator() {
    mTension = 2.0f;
}

public float getInterpolation(float t) {
    // a(t) = t * t * ((tension + 1) * t - tension)
    return t * t * ((mTension + 1) * t - mTension);
}

光看函数还是不直观。

y=x*x*(3*x-2)

4.3 函数曲线

我们只要关注0到1的区间，一看图我们就明白了，如果把x当时间，y当距离，就是先从原点往回运动，然后再快速的往终点运行。

五、总结

Interpolator的本质就是一个函数在0到1的区间内的表现。如何自定义Interpolator，只需要将函数表达式写到getInterpolation中即可。大家可以按照我的分析方法，剩余的Interpolator自己分析一下。

public float getInterpolation(float t) {
    return 函数表达式
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/11/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

apache

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

apache

登录后参与评论

0 条评论

热度