如何在特定时间启动 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"); }