Question

我在fabric.js版本1.6.0-rc.1中有一组形状，我试图从组的中心每2秒动画一次旋转，我试图从这里实现代码：

以下是我提出的建议：

// Group the shapes together.
    patrolGroup = new fabric.Group([circlePatrolPath, patrolManPlusVision], {
      top: 300,
      left: 300,
      originX: 'center',
      originY: 'center',
    });


patrolGroup.animate({ angle: -360 }, {
      easing: fabric.util.ease.easeOutCubic,
      duration: 2000,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: function onComplete() {
        console.log(Math.round(patrolManPlusVision.angle)),
        patrolManPlusVision.animate({
          angle: Math.round(patrolManPlusVision.angle) === 360 ? -360 : 360
        }, {
          duration: 2000,
          onComplete: onComplete
        });
      }
    });

这只旋转360度一次，我希望它是连续的。我认为onComplete部分会保持旋转，我可以看到控制台日志中的角度每两秒都会改变，但这并没有反映在动画中。

Answer 1

我找到了一种使用javascript interval函数的方法：

var counter = 0;
var myInterval = setInterval(function () {
  counter-=5;
  simulatePatrol()

}, 1000);

function simulatePatrol() {
  console.log(counter);
  //patrolGroup.animate({ angle: 60 });
  patrolGroup.animate('angle', counter, {
    onChange: canvas.renderAll.bind(canvas)
  });
}

不确定这是否是最好的方法，但它确实有效。我还发现原始代码无效的原因。事实证明，我没有正确地绑定事件。代码现在看起来像这样，并且正在运行：

var rotationDegrees = -10;
      patrolGroup.animate({ angle: rotationDegrees }, {
        duration: 1000,
        onChange: canvas.renderAll.bind(canvas),
        onComplete: function onComplete() {
          //console.log(Math.round(patrolManPlusVision.angle)),
          patrolGroup.animate({
            angle: rotationDegrees-=10
          }, {
            duration: 1000,
            onChange: canvas.renderAll.bind(canvas),
            onComplete: onComplete
          });
        }
      });

每个动画都需要onChange: canvas.renderAll.bind(canvas),。

Fabric.js - 每2秒旋转/更改一组形状的角度动画

1 个答案: