无法使用 fabricjs 来回放大和缩小对象

Question

我有一个物体（在我的例子中是一个圆圈），我想让它来回增长和收缩多次（3 次），就像一颗闪烁的星星。

var counter;
const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
let circle;
document.addEventListener('DOMContentLoaded', function() {
  circle = makeCircle(52.69, 17.77);
  canvas.add(circle);
});

document.getElementById('animateBtn').addEventListener('click', async function() {
  counter = 0;
  const result = await animateCircle(circle, 1);
  console.log(result);
  
});


function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 10,
    fill: 'yellow',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });


}

function animateCircle(circle, dir) {
  const minScale = 1;
  const maxScale = 2;

  return new Promise(resolve => {
    circle.animate({
      scaleX: dir ? maxScale : minScale,
      scaleY: dir ? maxScale : minScale
    }, {
      easing: fabric.util.ease.easeOutCubic,
      duration: 3000,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: function() {
        if (counter > 4) {
          resolve('finished animating the point');
        } else {
          if (dir == 1)
            animateCircle(circle, 0);
          else
            animateCircle(circle, 1);

        }
        counter++;
      }

    });
  });

}

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

我遇到的问题是，当动画完成后，我没有在控制台中得到已解决的结果。如果有人能告诉我哪里出了问题，我将不胜感激

Answer 1

实际上您确实在控制台上打印了结果。函数returns一个Promise。您使用此行打印该对象 console.log(result); 您可以在控制台上看到它的输出。您不必等待承诺来解决。 Promise 异步工作。你只需在控制台上打印它。所以它处于 pending status

Answer 2

回调时，您 return 对每个动画完成的新承诺。只需 return 一次承诺，然后在承诺中执行动画。

let counter;
const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
let circle;
document.addEventListener('DOMContentLoaded', function() {
  circle = makeCircle(52.69, 17.77);
  canvas.add(circle);
});

document.getElementById('animateBtn').addEventListener('click', onBtnClick);

async function onBtnClick() {
  counter = 0;
  const result = await animateCircle(circle, 1);
  console.log(result);
};


function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 10,
    fill: 'yellow',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });
}

function animateCircle(circle, dir) {
  const minScale = 1;
  const maxScale = 2;

  return new Promise((resolve, reject) => {
    animate(circle, dir)

    function animate(circle, dir) {
      circle.animate({
        scaleX: dir ? maxScale : minScale,
        scaleY: dir ? maxScale : minScale
      }, {
        easing: fabric.util.ease.easeOutCubic,
        duration: 3000,
        onChange: canvas.requestRenderAll.bind(canvas),
        onComplete: function() {
          if (counter > 4) {
            resolve('finished animating the point');
            return;
          } else {
            if (dir == 1)
              animate(circle, 0);
            else
              animate(circle, 1);
          }
          counter++;
        }
      });
    }
  });
}

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

无法使用 fabricjs 来回放大和缩小对象

unable to grow and shrink the object back and fourth with fabricjs

javascript

fabricjs