我如何在一定时间内开始动画?

发布于 01-23 05:02 字数 380 浏览 3 评论 0原文

我的程序的主要循环是使用requestAnimationframe循环的,例如角色崩溃后,为他碰撞3秒钟,然后以相同的速度眨眼?同时,整个游戏玩法将继续以不同的速度动画,

如何以不同的速度和一个动画中的时间来运行另一个动画?

我认为这里不需要的代码,使用requestAnimationFrame:

function loop() {
    requestAnimationFrame(loop)

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

    time = now

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

谢谢

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

天涯沦落人2025-01-30 05:02:48

您需要分别为每个动画存储“计时器”,然后添加会触发某些动画的条件(字符崩溃了吗?

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文