javascript - 无法使用fabricjs向后和向后扩展对象(unable to grow and shrink the object back and fourth with fabricjs)

Question

I have an object(a circle in my case) that i want to let it grow and shrink back and forth for a number of times (3 times), like a flashing star.(我有一个对象（在我的情况下为圆圈），我想让它来回移动多次（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> 

The problem that i have is that when the animation is finished i don't get the resolved result in the console.(我的问题是，动画制作完成后，我无法在控制台中获得解析结果 。)

I would appreciate if anyone could tell me what is wrong(如果有人能告诉我什么地方不对，我将不胜感激)   ask by Xris translate from so

Answer 1

On callback you were returning a new promise on every animation complete.(在回调时，您在每个动画完成时都返回一个新的Promise。)

Just return a promise once, and inside promise do the animation.(只需返回一次诺言，然后在诺言中执行动画。)

 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>