javascript - 如何在fabric.js画布上为圆的scaleX和scaleY设置动画(How to animate scaleX and scaleY of a circle on fabricjs canvas)

Question

I am trying to animate the scaleX and scaleY of an object(circle in my case) on fabricjs canvas but i have trouble making it to work.(我正在尝试在fabricjs画布上设置对象（在我的情况下为圆形）的scaleX和scaleY的动画，但是我无法使其正常工作。)

Here is my snippet(这是我的片段)

 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', function(){ animateCircle(circle, 1); }); 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 => { pointA.animate({ scaleX: dir ? maxScale : minScale, scaleY: dir ? maxScale : minScale }, { easing: fabric.util.ease.easeOutCubic, duration: 3000, onChange: canvas.renderAll.bind(canvas), onComplete: function () { resolve('finished animating the point'); } }); }); } 

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

  ask by Xris translate from so

Answer 1

Inside the animateCircle() function you're trying to apply the transformation to an object called pointA .(在animateCircle()函数内部，您尝试将转换应用于名为pointA的对象。)

Well, this object doesn't exist - the object you want to animate is called circle , which you've defined here:(好吧，这个对象不存在-您要设置动画的对象称为circle ，您已经在此处定义了它：)

circle = makeCircle(52.69, 17.77);

 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', function() { counter = 0; animateCircle(circle, 1); }); 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>