Fabric.js easeInOutQuint() 方法

简介

easeInOutQuint() 是 Fabric.js 中的一个缓动函数，用于在动画过程中控制物体运动的速度。easeInOutQuint() 的定义是基于贝塞尔曲线的，它可以在动画开始时缓慢加速，接着匀速运动，最后缓慢减速，使得动画过程更加自然流畅。

语法

easeInOutQuint(t, b, c, d)

• t: 动画已进行的时间（当前帧）。
• b: 物体起始位置（初始值）。
• c: 物体终止位置（目标值）。
• d: 动画总时长。

返回值

返回缓动后物体的位置。

代码示例

import {fabric} from 'fabric';

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

// 创建物体对象
const rect = new fabric.Rect({
  width: 200,
  height: 100,
  fill: 'red',
});

// 添加物体到画布上
canvas.add(rect);

// 动画过程
const startTime = Date.now();
const duration = 3000; // 动画总时长，单位毫秒

function animate() {
  const elapsedTime = Date.now() - startTime; // 已进行时间
  const startValue = 0; // 起始位置
  const endValue = canvas.getWidth() - rect.getWidth(); // 终止位置
  const currentValue = easeInOutQuint(elapsedTime, startValue, endValue, duration); // 动画位置
  rect.set({left: currentValue}); // 更新物体位置
  canvas.renderAll(); // 重渲染画布
  if (elapsedTime < duration) {
    requestAnimationFrame(animate); // 继续下一帧动画
  }
}

// 启动动画
requestAnimationFrame(animate);

此示例演示了如何使用 easeInOutQuint() 缓动物体的位置，并将之实现为 Canvas 动画。其中，物体的起始位置是 0，终止位置是画布宽度减去物体宽度。animate() 函数在每一帧动画时，通过调用 easeInOutQuint() 得到物体的当前位置，并将其更新到画布上，最后重渲染画布。

参考文献

• Fabric.js 官方文档