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，或编写自己的循环

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

2 个答案: