How can I use Anime.js for canvas animations?

How can I use Anime.js for canvas animations?

You can use Anime.js to create smooth animations on HTML5 canvas by manipulating the properties of canvas elements.

Can you give me a simple example of animating a circle?

Sure! You can draw a circle on the canvas and then use Anime.js to animate its position or size. Here's a basic example:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function drawCircle(x, y, radius) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
}

anime({
    targets: { x: 50, y: 50, radius: 20 },
    x: 300,
    y: 300,
    radius: 100,
    duration: 2000,
    easing: 'easeInOutQuad',
    update: function(anim) {
        drawCircle(anim.targets[0].x, anim.targets[0].y, anim.targets[0].radius);
    }
});

This will animate a circle from position (50, 50) to (300, 300) and increase its radius.

What if I want to animate multiple shapes?

You can animate multiple shapes by creating an array of targets and using Anime.js to iterate through them. Each shape can have its own properties and animations.