如何在特定時間啟動 animation？

Question

我使用 requestAnimationFrame 循環了程序的主循環 例如，在角色崩潰后，為他禁用碰撞 3 秒並以相同的速度閃爍？ 同時，整個游戲玩法將以不同的速度繼續動畫

我怎樣才能以不同的速度運行另一個 animation 並在一個 animation 期間運行一段時間？

我認為這里不需要的代碼，使用requestAnimationFrame的標准animation循環：

function loop() {
    requestAnimationFrame(loop)

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

    time = now

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

謝謝

Answer 1

您需要分別為每個 animation 存儲“計時器”，然后添加會觸發某些動畫的條件（角色是否崩潰？-> animate1，如果 animate1 當前正在運行 -> animate2，等等）

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