Fabric JS：如何同时为三角形的顶部和左侧位置设置动画？ + 动画错误

Question

我的问题似乎相对简单，但在谷歌上搜索了几个小时后，我没有得到更多信息。

基本上我想使用 animate 函数将两个三角形的中心（或一个开始）围绕另一个三角形移动。我想它应该分三个步骤表示一个动画，但我无法得到一些工作。

请注意，这是我第一次使用它，恐怕对你们中的某些人来说这听起来很明显。

另外我不确定我是否正确设置了一些东西（基于示例并且只为一个属性设置动画），因为动画不想启动：/

function createTriangle() {
  var canvas2 = new fabric.Canvas('myCanvas');

  var triangle = new fabric.Triangle({
    width: 300, height: 300, fill: 'red', left: 30, top: 0
  });

  triangle.animate('top', '200', {
    duration: 1000,
    onChange: canvas2.renderAll.bind(canvas2),
    onComplete: function() {
      //callback code goes here
    }
  });

  canvas2.add(triangle);
}

有人知道它为什么不工作吗？

谢谢

Answer 1

简单示例：

  triangle.animate({left: 100, top: 100 }, {
      duration: 1000,
      onChange: canvas.renderAll.bind(canvas),
   });

Answer 2

我不是 Fabric 用户，所以也许有更好的方法，但是对 .animate() 的调用是非阻塞的，所以你可以连续请求两个属性的动画：

triangle.animate('top', '+=100', {
  duration: 1000,
  onChange: canvas.renderAll.bind(canvas),
});

triangle.animate('left', '+=100', {
  duration: 1000,
  onChange: canvas.renderAll.bind(canvas),
});

这是jsbin 上的演示。我在 Fabric docs 上读到，这种使用 onChange 的方式会导致性能不佳。如果是这种情况，您可以使用requestAnimationFrame，或编写自己的循环代码