FabricJS 动画路径

Question

我正在尝试在 FabricJS 中平滑地设置路径动画。我看过的示例，但没有关于动画路径的示例。

我已经能够遍历一系列路径点来使某些功能正常运行，但它不稳定且效果不佳：

function animateLine(pathArray) {
  var pathString = '';
  var directionLine;

  pathArray.forEach((item, i) => {
    setTimeout(() => {
      pathString = pathString + item + ',';

      canvas.remove(directionLine);
      directionLine = new fabric.Path(pathString, {
        fill: '',
        stroke: 'black',
        strokeDashArray: [5, 5],
        objectCaching: false
      });
      canvas.add(directionLine);

    }, i * 20);
  });

}

animateLine(pathString);

Fiddle here.

我想做类似 this example 的事情，但它使用 Raphael，我希望不必切换库。

Answer 1

在其中一个 mod 的帮助下找到了解决方案 strokeDashOffset。

var canvas = new fabric.Canvas('c');
var pathArray = "M78.2,0.1c0,0,9.4,79.1,2.3,117  c-4.5,24.1-31.8,106.2-56.3,108.7c-12.7,1.3-24.2-11.9-16.5-15.5C15,207,40.2,231.1,19,261.7c-9.8,14.1-24.7,31.9-12.5,44.9  c11.3,12,53-36.8,59.2-23.8c8.6,18-40.8,23-28,49.2c14.7,30.4,21.6,39.9,48,58.5c31.3,22,147,66.2,147.2,149.5";

var path = new fabric.Path(pathArray, {
  fill: '',
  stroke: 'black',
  strokeDashArray: [5, 5],
  strokeDashOffset: 0
});
canvas.add(path);

function animatePath(path) {
    path.animate('strokeDashOffset', '-=3', {
    duration: 100,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: function(){
        animatePath(path)
    }
    });
}

animatePath(path);

Fiddle

FabricJS 动画路径

FabricJS Animate Path

fabricjs