fabricjs - Fabric JS : How to animate the top and left position of a triangle simultaneously? + 动画错误

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