Fabric.js easeInBounce() 方法

介绍

Fabric.js 是一个用于创建交互式画布的优秀 JavaScript 库。其中的 fabric.Animate 类提供了简单、易用的动画功能以及一些基于缓动函数的动画效果。其中，easeInBounce() 方法是其中一种缓动函数，它用于产生反弹效果的动画。

语法

fabric.util.ease.easeInBounce(t, b, c, d)

参数说明：

| 参数 | 描述 | | --- | --- | | t | 当前时间（单位：毫秒） | | b | 起始值 | | c | 值变化总量 | | d | 持续时间（单位：毫秒） |

返回值

返回当前时间下计算出的值。

例子

// 创建一个矩形对象
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red'
});
// 添加到画布中
canvas.add(rect);

// 执行动画，产生反弹效果
fabric.util.animate({
  startValue: 100, // 起始位置
  endValue: 300, // 结束位置
  duration: 2000, // 动画时长
  easing: fabric.util.ease.easeInBounce, // 缓动函数
  onChange: function(value) {
    rect.set('left', value);
    canvas.renderAll();
  }
});

在上面的例子中，我们创建了一个矩形对象，然后通过 fabric.util.animate() 方法执行动画，使用 easeInBounce() 方法作为缓动函数实现反弹效果。

注意事项

• easeInBounce() 方法会根据传入参数计算出当前时间下的值，建议将计算出的值作为属性传递给对象。
• 在执行缓动函数时，需要传入缓动函数和结束值，起始值和持续时间方法内部会计算。