requestAnimationFrame и setInterval анимируют в разном темпе

Question

Я перевожу два div, используя setInterval и requestAnimationFrame. При анимации с использованием интервала, div переводится со скоростью 3px за (1000/60) мс, что соответствует 180px на 1000 мс. В то же время, div, анимированный с использованием requestAnimationFrame, переводит со скоростью 0,18px на 1 мс, что соответствует 180px на 1000 мс.

Однако, как ни странно, они не переводят со скоростью, которую я хочу. Посмотрите на пример ниже:

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 или мне не удалось вычислить математику?

Answer 1

Нет абсолютно никакой гарантии, что ваш iterval будет работать с запрошенной скоростью, поэтому простое добавление некоторой константы для каждого обратного вызова, как это делает код для случая setInterval, не будет совпадать.

вы можете использовать performance.now или Date.now в качестве часов в setInterval корпусе

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>

они все еще могут не идеально выравниваться, хотя (а) они действительно работают в разное время и, таким образом, получают разные значения времени и (б) бегать с разной скоростью. Они будут близко, хотя, поскольку это фактически те же самые часы