Fabric.js easeInOutSine() 方法

easeInOutSine() 是 Fabric.js 动画中的一个函数，用于产生平滑的缓动效果。缓动是一种动画效果，通过在动画过程中逐渐改变速度来产生更加自然的运动效果，人眼对于此类平滑自然的动画效果比较喜欢，因此在游戏或其他应用中广泛采用。

语法

fabric.util.easeInOutSine(from, to, time)

参数说明：

• from：起始值。
• to：目标值。
• time：运动时间。

返回值

缓动后的值。

使用方法

下面的例子将演示如何使用 easeInOutSine() 方法在 Fabric.js 中创建缓动动画。

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

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red'
});

canvas.add(rect);

rect.animate('left', fabric.util.easeInOutSine(rect.left, 300, 1000), {
  duration: 1000,
  easing: fabric.util.easeInOutSine,
  onChange: canvas.renderAll.bind(canvas),
  onComplete: function () {
    console.log('Animation completed');
  }
});

代码解释：

1. 创建 fabric.Canvas 实例。
2. 创建一个红色矩形。
3. 将矩形添加到画布中。
4. 使用 animate() 方法创建动画，指定起始位置为矩形当前的 left 值，目标位置为 300，运动时间为 1000ms。
5. 指定 duration 和 easing 属性。duration 代表动画持续的时间，easing 代表缓动函数。
6. onChange 回调函数在动画每一帧（30帧/s）更新画布时被调用，负责重绘画布。
7. onComplete 表示动画结束后的回调函数，用于监听动画结束事件。

Demo

下面是一个基于 Fabric.js 的缓动动画演示，你可以尝试修改参数或添加自己的元素来进一步理解缓动动画效果。

jsfiddle

总结

easeInOutSine() 方法用于产生平滑的缓动效果，在 Fabric.js 中可以与 animate() 方法一起使用来实现优秀的动画效果。注意尽量选择合适的缓动函数，以实现更好的视觉效果。