Fabric.js easeOutBack() 方法

在 Fabric.js 中，easeOutBack() 方法使用时，可以实现一个动画元素在运动过程中，在到达终点时，会略微超过终点，然后反弹回来的效果。

语法

easeOutBack(pos)

pos：元素在运动过程中的位置参数，取值范围为 0 到 1 之间。

返回值

该方法会返回一个经过 easeOutBack 缓动算法处理后的值，范围为 0 到 1 之间。

示例

fabric.util.ease['easeOutBack'] = function(pos) {
  return (pos=pos/1-1)*pos*((1.70158+1)*pos + 1.70158) + 1;
};

使用方式

在实现动画效果时，可以使用以下代码：

var animateOptions = {
  left: endLeft,
  top: endTop,
  duration: duration,
  easing: fabric.util.ease['easeOutBack'],
  onComplete: function(){
    console.log("动画完成");
  }
};
object.animate(animateOptions);

其中 easing 参数即为 easeOutBack() 方法，使用该方法后，动画元素在移动到终点时，将会产生反弹的效果。

总结

Fabric.js 中的 easeOutBack() 方法实现了在动画元素移动到终点时产生反弹效果的功能，具有一定的实际应用价值。使用时只需要在 animate() 方法的 easing 参数中指定即可。