无法使用 javascript 为元素的多个实例设置动画。 只会执行第一个动画

Question

I have created an element called Particel. Single animation of this element also work. But as soon as I try to run multiple animations, only one animation gets performed. I think the problem is the requestAnimationFrame(this.animate.bind(this))-call, but i dont know how to change it to accept multiple animations at once. Any ideas how to fix this?

js-code

//gloabl vars
let particels = [];
let numberParticels = 120;
let canvas; 
let ctx;
let title;
let mesaureTitle;
let boundRadius;
let animations;

window.onload = function () {
    this.init();
    for(let i = 0; i < numberParticels; i++){
        particels[i].update();
        particels[i].draw();
        particels[i].animate(0);
    }
  
}

function init(){
    canvas = document.getElementById("c");
    ctx = canvas.getContext("2d");
    title = document.getElementById("title");
    mesaureTitle = title.getBoundingClientRect();
    bound = {
        x: mesaureTitle.x,
        y: mesaureTitle.y,
        width: mesaureTitle.width,
        height: mesaureTitle.height,
    };
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    for(let i = 0; i < numberParticels; i++){
        let x = Math.floor(Math.random() * window.innerWidth);
        let y = Math.floor(Math.random() * window.innerHeight);
        let size = Math.floor(Math.random() * 25) + 3;
        let weight = Math.floor(Math.random() * 11) + 2;
        particels.push(new Particel(x, y, size, weight));
    }
}

class Particel {
    constructor (x,y,size, weight) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.directionX = 0.15332;
        this.resetWeight = weight;
        this.weight = weight;
        this.lastTime = 0;
        this.interval = 1000/60;
        this.timer = 0;
    }

    update(){
        this.weight += 0.02;
        this.y = this.y + this.weight;
        this.x += this.directionX;
        //check for collision with textField
        if (this.x < bound.x + bound.width
            && this.x + this.size > bound.x &&
            this.y < bound.y + bound.height &&
            this.y + this.size > bound.y) {
                this.y -= 3;
                this.weight *= -0.3;
        }
    }

    draw(){
        if(this.y > canvas.height){
            this.y = 0 - this.size;
            this.weight = this.resetWeight;
            //create random start point
            this.x = Math.floor(Math.random() * canvas.width);
        }
          ctx.fillStyle = "rgb(0, 180, 97)";
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.closePath();
          ctx.fill();
    }

    animate(timeStamp){
        const deltaTime = timeStamp - this.lastTime;
        this.lastTime = timeStamp;
        if(this.timer > this.interval){
            ctx.clearRect(0,0, canvas.width, canvas.height);
            this.update();
            this.draw();
            this.timer = 0;
        }else {
            this.timer += deltaTime;
        }
        ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
        requestAnimationFrame(this.animate.bind(this));
    }
}```

Answer 1

The major problem is clearing the canvas inside the animate method of each particle. So if you draw multiple particles, each particle update call clears the canvas, overwriting previous particle data, which only leaves the last particle visible.

You could try removing the

ctx.clearRect(0,0, canvas.width, canvas.height);

line from where it is and create a createAnimationFrame call back in init to clear the canvas before amimating particles:

function init() {
    // ....

   requestAnimationFrame( ()=> ctx.clearRect(0,0, canvas.width, canvas.height));
   // existing for loop:
   for(let i = 0; i < numberParticels; i++){
   // ... .
}

However this creates (one plus the number of particles) requests for an animation frame. A better solution would be to remove requesting animation frames from the Particel class and create a single requestAnimationFrame callback which goes through the particels array and calls a class method to redraw each particle on the canvas with updated position.

---

Also the code generates an error in strict mode that bound has not been declared. I suggest declaring it globally rather than relying on sloppy mode JavaScript creating it as a window property for you.