Interpolator的本质

前言

写过动画的人都知道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轴当做距离,可以发现整个过程函数的斜率不变,说明做均速运动。

Interpolator的本质

二、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的函数区间内,可以看到整个过程的斜率在增加,也就是说明在做加速运动。

Interpolator的本质

三、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的函数区间内,可以看到整个过程开始和结束斜率小于中间段的斜率

Interpolator的本质

四、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的本质

五、总结

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

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

发表评论

登录后才能评论
联系客服
联系客服
分享本页
返回顶部