requestAnimationFrame和setInterval以不同的速度进行动画制作 [英] requestAnimationFrame and setInterval animating at a different pace

问题描述

我正在使用 setInterval 和 requestAnimationFrame 转换两个div.div使用间隔动画，以每(1000/60)ms 3px的速率转换，等于每1000ms 180px.同时，使用 requestAnimationFrame 动画的div转换速率为每1ms 0.18像素，相当于每1000ms 180像素.

I am translating two divs using setInterval and requestAnimationFrame. Animated using interval, the div translates at a rate of 3px per (1000/60)ms, which equates to 180px per 1000ms. At the same time, the div animated using requestAnimationFrame translates at a rate of 0.18px per 1ms, which equates to 180px per 1000ms.

但是，他们奇怪地没有按照我想要的速度进行翻译.看下面的例子:

However, they curiously aren't translating at the speed I want. Look at the example below:

let interval = document.querySelector('.interval')
let raq = document.querySelector('.raq')

function startAnimation() {
  let translateValue = 0
  setInterval(() => {
    translateValue = (translateValue + 3) % 300
    interval.style.transform = `translateX(${translateValue}px)`
  }, 1000 / 60)

  let raqAnimation = (timeElapsed) => {
    let translateValue = (timeElapsed * 0.18) % 300
    raq.style.transform = `translateX(${translateValue}px)`
    window.requestAnimationFrame(raqAnimation)
  }

  window.requestAnimationFrame(raqAnimation)
}

window.setTimeout(startAnimation, 1000)

.interval,
.raq {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background-color: #121212;
  margin: 1rem;
}

<div class="interval"></div>
<div class="raq"></div>

我使用 setInterval 或 requestAnimationFrame 是错误的还是在数学计算中失败了?

Did I use setInterval or requestAnimationFrame wrong or did I fail at the maths calculation?

推荐答案

绝对不能保证您的iterval将以请求的速率运行，因此仅添加每个常量，就像setInterval情况下的代码一样要比赛.

There is a absolutely no guarantee that your iterval will run at the requested rate so just adding some constant every callback like the code does for the setInterval case isn't going to match.

在 setInterval 情况下，您可以使用 performance.now 或 Date.now 作为您的时钟

you could use performance.now or Date.now as your clock in the setInterval case

let interval = document.querySelector('.interval')
let raq = document.querySelector('.raq')

function startAnimation() {
  setInterval(() => {
    const translateValue = (performance.now() * 0.18) % 300
    interval.style.transform = `translateX(${translateValue}px)`
  }, 1000 / 60)

  let raqAnimation = (timeElapsed) => {
    let translateValue = (timeElapsed * 0.18) % 300
    raq.style.transform = `translateX(${translateValue}px)`
    window.requestAnimationFrame(raqAnimation)
  }

  window.requestAnimationFrame(raqAnimation)
}

window.setTimeout(startAnimation, 1000)

.interval,
.raq {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background-color: #121212;
  margin: 1rem;
}

<div class="interval"></div>
<div class="raq"></div>

尽管(a)它们实际上在不同的时间运行，因此获得不同的时间值，以及(b)以不同的速率运行，但它们仍可能无法完全对齐.尽管它们实际上是相同的时钟，但它们将关闭

they still may not perfectly align though as (a) they are actually running at different times and so get different time values and (b) the run at different rates. They will be close though since it's effectively the same clock

这篇关于requestAnimationFrame和setInterval以不同的速度进行动画制作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！