如何在画布上绘制动画

Question

我将对画布fabric_JS上从点1到点2然后从点2到点3的线条进行动画处理。 到目前为止，我已经设法在画布上绘制并显示了点，但是我缺少线描动画的一部分。 这是片段

 const canvas = new fabric.Canvas('gameCanvas', {selection: false}); let circle1, circle2, circle3; let line1, line2; let circles = []; fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; document.addEventListener('DOMContentLoaded', function(){ drawCircles(); }); document.getElementById('animateBtn').addEventListener('click', function(){ animateLinesDrawing(); }); function makeCircle(x, y) { return new fabric.Circle({ left: x, top: y, strokeWidth: 2, radius: 10, fill: 'white', stroke: '#666', selectable: false, hoverCursor: 'default', hasControls: false, hasBorders: false }); } function drawCircles() { circle1 = makeCircle(52.69, 17.77); circle2 = makeCircle(262.69, 120.77); circle3 = makeCircle(272.69, 232.77); circles.push(circle1); circles.push(circle2); circles.push(circle3); } function makeLine(coords) { return new fabric.Line(coords, { fill: 'red', stroke: 'red', strokeWidth: 2, originX: 'right', originY: 'center', selectable: false, hoverCursor: 'default' }); } function animateLinesDrawing() { line1 = makeLine([circle1.left, circle1.top, circle2.left, circle2.top]); line2 = makeLine([circle2.left, circle2.top, circle3.left, circle3.top]); //line1_ x1: 52.69 //line1_ y1: 17.77 //line1_ x2: 262.69 //line1_ y2: 120.77 //startPoints:[line1.x1, line1.y1] //endPoints:[line1.x2, line1.x2] line1.animate('x1', 262.69 , { onChange: canvas.renderAll.bind(canvas), duration: 1000, }); line1.animate('y1', 120.77 , { onChange: canvas.renderAll.bind(canvas), duration: 1000, }); canvas.add(line1); addCirclesTextToCanvas(); } function addCirclesTextToCanvas() { canvas.add(circle1, circle2, circle3); //..Add text inside the 3 circles for(let i = 0; i < circles.length; i++) { canvas.add(new fabric.Text((i + 1).toString(), { left: circles[i].left, top: circles[i].top, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14, fill: 'black', originX: 'center', originY: 'center' })); } } 

 <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 Lines Drawing</button> 

如您在输出中看到的，我得到的动画不是我想要的。 任何帮助，将不胜感激。

Answer 1

在animate方法中，更改x2，y2的值，并且onComplete回调对第二行执行相同的操作。

DEMO

 const canvas = new fabric.Canvas('gameCanvas', { selection: false }); let circle1, circle2, circle3; let line1, line2; let circles = []; fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; document.addEventListener('DOMContentLoaded', function() { drawCircles(); }); document.getElementById('animateBtn').addEventListener('click', function() { animateLinesDrawing(); }); function makeCircle(x, y) { return new fabric.Circle({ left: x, top: y, strokeWidth: 2, radius: 10, fill: 'white', stroke: '#666', selectable: false, hoverCursor: 'default', hasControls: false, hasBorders: false }); } function drawCircles() { circle1 = makeCircle(52.69, 17.77); circle2 = makeCircle(262.69, 120.77); circle3 = makeCircle(272.69, 232.77); line1 = makeLine([circle1.left, circle1.top, circle1.left, circle1.top]); line2 = makeLine([circle2.left, circle2.top, circle2.left, circle2.top]); canvas.add(line1,line2); circles.push(circle1); circles.push(circle2); circles.push(circle3); } function makeLine(coords) { return new fabric.Line(coords, { fill: 'red', stroke: 'red', strokeWidth: 2, originX: 'right', originY: 'center', selectable: false, hoverCursor: 'default' }); } function animateLinesDrawing() { line1.set({x1:circle1.left, y1:circle1.top, x2:circle1.left, y2:circle1.top}); line2.set({x1:circle2.left, y1:circle2.top, x2:circle2.left, y2:circle2.top}); line1.animate({ x2: circle2.left, y2: circle2.top }, { onChange: canvas.requestRenderAll.bind(canvas), onComplete: function() { line1.setCoords(); line2.animate({ x2: circle3.left, y2: circle3.top }, { onChange: canvas.requestRenderAll.bind(canvas), onComplete: line2.setCoords.bind(line2), duration: 1000 }); }, duration: 1000 }); addCirclesTextToCanvas(); } function addCirclesTextToCanvas() { canvas.add(circle1, circle2, circle3); //..Add text inside the 3 circles for (let i = 0; i < circles.length; i++) { canvas.add(new fabric.Text((i + 1).toString(), { left: circles[i].left, top: circles[i].top, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14, fill: 'black', originX: 'center', originY: 'center', selectable: false })); } } 

 <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 Lines Drawing</button>