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

Question

我的问题似乎相对容易，但是经过几个小时的谷歌搜索后，我没有更多的信息。

基本上，我想使用动画功能围绕两个三角形移动两个三角形的中心（或从一个三角形开始）。我想它应该可以通过三个步骤来表示动画，但是我无法正常工作。

请注意，这是我第一次使用它，对于某些人来说，它听起来似乎很明显。

而且我不确定我是否已经正确设置了东西（基于示例并且仅对一个属性设置了动画），因为动画不想启动：/

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),
   });