如何无限期地为 canvas FabricJs 上的同心圆制作动画

Question

我可以使用 FabricJs Canvas 为 canvas 上的同心圆设置动画。我可以制作一个无限动画，直到最后一个外圈，但是最后一个外圈仍然在 canvas 上，我的目标是重新启动从内圈到外圈的动画。这是我试过的。

const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

let circles = [];

document.addEventListener('DOMContentLoaded', function() {
  drawCircles();
});

document.getElementById('animateBtn').addEventListener('click', function() 
{
   canvas.clear();
   animateCircles();//This function will trigger the animation
     
});

function makeCircle(r) 
{
  return new fabric.Circle({
    left: 300,
    top: 120,
    strokeWidth: 1.5,
    radius: r,
    fill: 'white',
    stroke: 'black',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });

}

//This function would draw 10 concentric circles on the canvas
function drawCircles()
{
   for(let i = 9; i >= 0; i--)
     {
       let circle  = makeCircle(10*(i + 1));
         circles.push(circle);
         canvas.add(circle);
     }
   
     
}

function animateCircles()
{
  canvas.clear();
    
    function loop(i) 
    {
        if (i < 0) return; 
        circles[i].animate({
            opacity: 1
        }, {
            duration: 500, //the animation last 5 ms
            easing: fabric.util.ease['easeInElastic'],
            onChange: canvas.renderAll.bind(canvas),
            onComplete: function () {
                circles[i].setCoords();
                canvas.add(circles[i]);
                canvas.renderAll();
                loop(i - 1);
            }
        });
    }

    loop(9); 
    setInterval(function()
    {
         canvas.clear();
         loop(9);
        
    }, 5000); //Repeat the animation every 5 seconds
        
}

#container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#animateBtn {
    margin-bottom: .5em;
}

<div id="container">
  <button id="animateBtn">Start Animation</button>
  <canvas id="gameCanvas" width="600" height="240" style="border: 2px solid green;"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>

Answer 1

这是因为您每 5000 毫秒调用一次 setInterval()，并且试图同时为第十个圆圈设置动画。 500ms * 10 = 5000ms。所以当第十个圆圈开始动画时，你正在通过 setInterval()

调用循环函数

将召回时间更改为 5500 毫秒

setInterval(function () {
    canvas.clear();
    loop(9);
  }, 5500); //Repeat the animation every 5 seconds

如何无限期地为 canvas FabricJs 上的同心圆制作动画

How to indenfinetly animate the concetric circles on a canvas FabricJs

javascript

fabricjs