Как остановить или приостановить анимацию в fabricjs - PullRequest
Новая
       54

Как остановить или приостановить анимацию в fabricjs

0 голосов
/ 04 ноября 2019

Я пытаюсь остановить или приостановить анимацию прямоугольника, используя 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>

1 Ответ

1 голос
/ 05 ноября 2019

Возвращает истинное значение из abort метода анимации, оно останавливает анимацию.

DEMO 

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>
...