# 使用插值
使用 setInterpolation
方法可以设置动画的贝塞尔插值,用图形直观的解释(图中右上角的点就是插值点):
Bling.TWEEN
提供三种常用插值:Linear
、Bezier
、CatmullRom
,当然,你可以使用自己的插值算法,绑定到 Bling.TWEEN.Interpolation
即可。
现在我们写一个 cos 的插值算法:
const cosineFn = function(p0, p1, t) {
const k = (1 - Math.cos(t * Math.PI)) / 2;
return (p1 - p0) * k + p0;
};
Bling.TWEEN.Interpolation.Cosine = function(v, k) {
const m = v.length - 1;
const f = m * k;
const i = Math.floor(f);
return cosineFn(v[i], v[i + 1 > m ? m : i + 1], f - i);
};
然后,使用它:
const action = Bling.MoveTo(3000, {
x: [260, 0, 80],
y: [400]
});
action.setInterpolation(Bling.TWEEN.Interpolation.Cosine);
所有内置插值如下:
Linear | Bezier | CatmullRom |
---|---|---|
start===end | start===end | start===end |