前言
写过动画的人都知道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 函数表达式
}