Tengo el ciclo principal del programa en bucle usando requestAnimationFrame Como, por ejemplo, después de que el personaje se estrelló, deshabilite la colisión para él durante 3 segundos y parpadee a la misma velocidad. Al mismo tiempo, todo el juego seguirá moviéndose a una velocidad diferente.
¿Cómo puedo ejecutar otra animación a una velocidad diferente y durante un tiempo durante una animación?
Creo que el código no se requiere aquí, un bucle de animación estándar que usa requestAnimationFrame:
function loop() { requestAnimationFrame(loop) let now = new Date().getTime(), dt = now - (time || now) time = now game.step(dt) game.render() }Gracias
Necesitará almacenar "temporizadores" para cada animación por separado, luego agregar condiciones que activarían ciertas animaciones (¿el personaje se bloquea? -> animate1, si animate1 se está ejecutando actualmente -> 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"); }