如何使用 FabricJS 取消 Line 中的运行动画？

1. 简介

FabricJS 是一个基于 HTML5 Canvas 的跨平台的绘图库，它提供了丰富的图形交互，包括线条、矩形、圆形、文本、图像等多种元素，并且支持元素的转换、组合和动画效果。在 FabricJS 中，可以通过 animate 方法为元素添加运行动画，但是在某些场景下，我们可能需要取消元素的运行动画，这篇文章将介绍如何使用 FabricJS 取消元素运行动画。

2. 取消 Line 元素的运行动画

2.1 animate 方法

在 FabricJS 中，可以通过 animate 方法为元素添加运行动画，该方法定义如下：

animate(property, to, [options])

property 参数指定要进行动画的属性，可以是 CSS 样式或自定义属性。 to 参数指定属性的最终值。 options 参数是一个可选的对象，包括以下属性：

duration: 指定动画的时长，默认值为 500ms。

easing: 指定动画的缓动函数，默认值为 fabric.util.ease.easeOutQuad。

onChange: 指定动画过程中的回调函数。

onComplete: 指定动画完成后的回调函数。

2.2 取消动画

在 FabricJS 中，可以通过 stopAnimation 方法取消元素的运行动画，在未指定 onChange 回调函数的情况下，该方法将在动画停止前设置元素属性的最终值。 stopAnimation 方法定义如下：

stopAnimation(property)

property 参数指定要停止动画的属性，如果未指定该参数，则停止所有属性的动画。

因此，要取消 Line 元素的动画，只需要调用 stopAnimation 方法即可。

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

var line = new fabric.Line([10, 10, 100, 100], {
  stroke: 'red',
  strokeWidth: 2,
  left: 100,
  top: 100
});
canvas.add(line);
line.animate('strokeWidth', 10, {
  duration: 2000,
  onChange: canvas.renderAll.bind(canvas),
  onComplete: function() {
    console.log('Animation complete.');
  }
});
// 取消动画
line.stopAnimation('strokeWidth');

上述代码在画布上添加了一条线元素，并将其宽度从 2px 动画变化为 10px，时长为 2s。但是，在动画运行过程中，通过调用 stopAnimation 方法停止了该元素的动画。

2.3 示例

下面是一个完整的示例，点击按钮可以开始或停止 Line 元素的动画。

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

var line = new fabric.Line([10, 10, 100, 100], {
  stroke: 'red',
  strokeWidth: 2,
  left: 100,
  top: 100
});
canvas.add(line);
document.getElementById('btnStart').addEventListener('click', function() {
  line.animate('strokeWidth', 10, {
    duration: 2000,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: function() {
      console.log('Animation complete.');
    }
  });
});
document.getElementById('btnStop').addEventListener('click', function() {
  line.stopAnimation('strokeWidth');
});

点击“开始动画”按钮，可以开始 Line 元素的动画，点击“停止动画”按钮，可以停止 Line 元素的动画。

3. 总结

通过上面的介绍，我们知道了如何使用 FabricJS 取消 Line 元素的运行动画。在需要停止动画的时候，只需要调用元素的 stopAnimation 方法即可。在编写代码的时候，我们可以根据自己的需要选择合适的参数（例如：property、duration、easing 等），来令动画更加流畅、优美。