Fabric.js easeInOutQuad() 方法

在Fabric.js中，easeInOutQuad()方法是在动画中使用的一个函数，用于控制动画的速度。easeInOutQuad()方法可以使动画从开始到结束加速然后减速。

语法

fabric.util.ease.easeInOutQuad(currentTime, startValue, changeInValue, duration)

参数

当前时间（currentTime）：即为动画开始执行到当前时刻的时间，单位为毫秒（ms）。

起始值（startValue）：即为动画起始时的值。

变化值（changeInValue）：即为动画结束时与起始时的差值。

动画持续时间（duration）：即为动画执行的总时间长度，单位为毫秒（ms）。

返回值

该方法返回值为变化后的值。

例子

以下代码演示了如何使用easeInOutQuad()方法来实现动画速度的控制。

function animateWidth(element, startWidth, endWidth, duration) {
  var startTime = Date.now();
  requestAnimationFrame(function animate() {
    var time = Date.now() - startTime;
    var width = fabric.util.ease.easeInOutQuad(time, startWidth, endWidth - startWidth, duration);
    element.width = width;
    if (time < duration) {
      requestAnimationFrame(animate);
    }
  });
}

解释

该函数接受四个参数：

1. element：操作的DOM元素。
2. startWidth：动画起始时宽度。
3. endWidth：动画结束时宽度。
4. duration：动画持续时间。

该函数将会在浏览器中使用requestAnimationFrame()方法来生成动画。函数中的animateWidth()将会在每帧运行，检查时间是否达到动画所需要的时间。如果未达到时间，它将调用requestAnimationFrame()来再次运行，从而实现动画效果。

最后，我们将用easeInOutQuad()方法获取当前时间的动画宽度，因此每次调用requestAnimationFrame()时动画的速度会加速，最后减速到目标宽度。