I need to animate the concetric circles on a canvas FabricJs using recursive function

user_9195987 0
Viewed 50

I have 10 concentric circles that i want to animate using FabricJs Canvas. My goal is that the 1st inner circle should show itself first then and the 2nd, and so on by using recursion or some other techniques to avoid code duplication. I have managed to animates two 1st inner circles but with redundant code.

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() {
 animateCircles();
});

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
  });

}

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();
  
    
    circles[9].animate({
            opacity: 1
        },
        {
            duration: 2000,
            easing: fabric.util.ease['easeInElastic'],
            onChange: canvas.renderAll.bind(canvas),
            onComplete: function () {

                circles[9].setCoords();
                canvas.add(circles[9]);
                canvas.renderAll();
                circles[8].animate({
                    opacity: 1
                },
                {
                    duration: 2000,
                        easing: fabric.util.ease['easeInElastic'],
                        onChange: canvas.renderAll.bind(canvas),
                        onComplete: function () {
                            circles[8].setCoords();
                                canvas.add(circles[8]);
                                canvas.renderAll();
                                //On this line i need to use the code for animation
                        }
                }
                
                );
        }
    });
}
#container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#animateBtn {
    margin-top: .5em;
}
<div id="container">
    <canvas id="gameCanvas" width="600" height="240" style="border: 2px solid green;"></canvas>
  <button id="animateBtn">Start Animation</button>
</div>

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

fabricjs recursion javascript
1 Answers

Create a function loop(i) which has the repeating code (so without the initial clear() call) for one circle. Let i be the index of the circle. Then in the onComplete callback, call that loop, but now with argument i-1. Add a stop condition (when i would become negative).

Here is your code with that implementation:

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

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

let circles = [];

document.addEventListener('DOMContentLoaded', drawCircles);
document.getElementById('animateBtn').addEventListener('click', animateCircles);

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
  });
}

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; // end the asynchronous loop
        circles[i].animate({
            opacity: 1
        }, {
            duration: 300,
            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); // start the asynchronous loop
}
#container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#animateBtn {
    margin-top: .5em;
}
<div id="container">
    <canvas id="gameCanvas" width="600" height="240" style="border: 2px solid green;"></canvas>
  <button id="animateBtn">Start Animation</button>
</div>

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

user_54598390
Related