# 使用插值

使用 setInterpolation 方法可以设置动画的贝塞尔插值,用图形直观的解释(图中右上角的点就是插值点):

Bling.TWEEN 提供三种常用插值:LinearBezierCatmullRom,当然,你可以使用自己的插值算法,绑定到 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