Question

我正在尝试使用 FabricJs 停止或暂停矩形的动画。但是我试图谷歌的文档，没有太多的信息如何实现它。我将不胜感激

const canvas = new fabric.Canvas('c', {
  selection: false
});

var hasAnimationStarted = false;
document.getElementById('button').onclick = startAnimation;
var rect = new fabric.Rect({
  left: 10,
  top: 10,
  fill: "#FF0000",
  stroke: "#000",
  width: 50,
  height: 50,
});
canvas.add(rect);

function startAnimation() {
  if (hasAnimationStarted === false) {
    hasAnimationStarted === true;
    document.getElementById('button').innerText = 'Stop Animation';

    rect.animate({
      left: 250,
    }, {
      onChange: canvas.renderAll.bind(canvas),
      duration: 6000,
      onComplete: function() {
        hasAnimationStarted === false;
        document.getElementById('button').innerText = 'Start Animation';
      },
      abort: function() {

      }
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="c" width="300" height="300" style="border: 2px solid green;"></canvas>
<button id="button">
  Start Animation
</button>

Answer 1

从abort动画方法返回真实值，它将停止动画。

演示

const canvas = new fabric.Canvas('c', {
  selection: false
});

let hasAnimationStarted = false;
document.getElementById('startAnim').onclick = startAnimation;

const rect = new fabric.Rect({
  left: 10,
  top: 10,
  fill: "#FF0000",
  stroke: "#000",
  width: 50,
  height: 50,
});
canvas.add(rect);

function startAnimation() {
  if (hasAnimationStarted) {
    stopAnimation();
  } else {
    hasAnimationStarted = true;
    document.getElementById('startAnim').innerText = 'Stop Animation';
    rect.animate({
      left: 250,
    }, {
      onChange: canvas.requestRenderAll.bind(canvas),
      duration: 6000,
      onComplete: stopAnimation,
      abort: () => !hasAnimationStarted
    });
  }
}

function stopAnimation() {
  hasAnimationStarted = false;
  document.getElementById('startAnim').innerText = 'Start Animation';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="c" width="300" height="300" style="border: 2px solid green;"></canvas>
<button id="startAnim">
  Start Animation
</button>

如何在Fabric.js中停止或暂停动画

1 个答案: