How do I start an animation for a certain time?

Question

I have the main loop of the program looped using requestAnimationFrame As for example after the character crashed, disable the collision for him for 3 seconds and blink at the same speed? At the same time, the entire gameplay will continue to animate at a different speed

How can I run another animation at a different speed and for a time during one animation?

The code I think is not required here, a standard animation loop using requestAnimationFrame:

function loop() {
    requestAnimationFrame(loop)

    let now = new Date().getTime(),
        dt = now - (time || now)

    time = now

    game.step(dt)
    game.render()
}

thanks

Answer 1

You'll need store "timers" for each animation separately, then add conditions that would trigger certain animations (is character crashed? -> animate1, if animate1 is currently running -> animate2, etc)

 const animationTimers = { animation1: { time: 200, //wait between frames timer: 0, //this will hold previous frame timestamp func: animationFunc1 //callback function }, animation2: { time: 500, timer: 0, func: animationFunc2 } }; function loop(timestamp) { if (timestamp < 6000) //limit whole animation to 6 sec requestAnimationFrame(loop) let now = new Date().getTime(); for(let i in animationTimers) { if (now - animationTimers[i].timer > animationTimers[i].time) { animationTimers[i].timer = now; animationTimers[i].func(); } } } loop(0); function animationFunc1() { if (animationTimers.animation2.timer) { if (.animationTimers.animation1.started) animationTimers.animation1.started = animationTimers.animation1;timer. //remember when started if (new Date().getTime() - animationTimers.animation1.started < 4000) //only animate for 4 sec console,log("animation 1", "remaining". (4000-(new Date().getTime() - animationTimers.animation1,started)) / 1000; "sec"). } } function animationFunc2() { console;log("animation 2"); }