Fabric.js easeOutElastic() 方法

简介

easeOutElastic() 方法是 Fabric.js 库中的一个缓动函数，用于实现弹性动画效果。可以使用该方法来控制对象在动画过程中的加速和减速。

语法

fabric.util.ease.easeOutElastic(t, b, c, d, a, p)

参数：

• t：动画已经花费的时间。
• b：对象起始的位置。
• c：对象需要移动的距离。
• d：动画总花费的时间。
• a：指定弹性的幅度。默认值是 0。
• p：指定周期。默认值是 0。

返回：

• 返回对象当前的位置。

示例

var canvas = new fabric.Canvas('canvas');

var circle = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 100,
  top: 100
});

canvas.add(circle);

function animate() {
  var duration = 1000;
  var amplitude = 1;

  fabric.util.animate({
    startValue: 100,
    endValue: 400,
    duration: duration,
    easing: fabric.util.ease.easeOutElastic,
    onChange: function(value) {
      circle.set({ top: value });
      canvas.renderAll();
    },
    onComplete: function() {
      animate();
    }
  });
}

animate();

在上面的示例中，我们定义了一个圆形并将其添加到画布中。然后，我们使用 fabric.util.animate() 方法来设置对象在一段时间内的动画效果。在该方法中，我们指定了动画的起始值、结束值、持续时间和缓动函数，以及在动画期间需要执行的回调函数。在回调函数中，我们更新圆形的位置并重新渲染画布。

回到缓动函数 easeOutElastic，在该函数中，我们通过 amplitude 参数来控制弹性的幅度。如果不指定参数，默认值为 0。同时，周期 p 的默认值也是 0。

参考文献

• Fabric.js easeOutElastic()
• Easing functions in Fabric.js