javascript requestAnimationFrame 最终位置永远不准确

Question

let pf = document.querySelectorAll('.pf');

for (let i of pf) {
  Object.assign(i.style, {
    left: '400px'
  })
}

function shiftLetters() {
  let start = performance.now();
  let dist = -400;
  let dur = 500;

  const logoAnimate = (timestamp) => {

    var runtime = timestamp - start
    var progress = Math.min(runtime / dur, 1)
    const position = progress * dist;

    if (runtime < dur) {
      for (let i = 0; i < pf.length; i++) {
        (function(i) {
          setTimeout(function() {
            pf[i].style.transform = `translate3d(${position}px,0,0)`
          }, 100 * i)
        })(i);
      }
      requestAnimationFrame(logoAnimate)
    }
  }
  requestAnimationFrame(logoAnimate)
}

document.getElementsByTagName('button')[0].addEventListener('click', shiftLetters);

#wrapper {
  display: flex;
  position: absolute;
  -webkit-transform: translate(-50%, 10%);
  transform: translate(-50%, 10%);
  top: 50%;
  left: 50%;
}

.pf {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 2px;
  background-color: red;
}

button {
  display: block;
  margin-top: 50px;
}

<div id="wrapper">
  <div class="pf"></div>
  <div class="pf"></div>
  <div class="pf"></div>
  <div class="pf"></div>
</div>
<button>animate</button>

当单击按钮时，我有 4 个元素，它们应该以 dist 变量的精确距离结束。相反，它以随机整数结束，并且永远不会像我的 dist 变量 -400 中所述那样精确地为 -400px。必须是简单的事情。我已经编写了范围之外的变量等等。

Answer 1

原因是您从未应用最终转换。在 shiftLetters 的最后一次迭代中，当 position finally = -400 runtime 大于 dur 时，因此您永远不会输入if 语句并应用变换。下面稍微重构了代码。

let pf = document.querySelectorAll('.pf');

for (let i of pf) {
  Object.assign(i.style, {
    left: '400px'
  })
}

function shiftLetters() {
  let start = performance.now();
  let dist = -400;
  let dur = 500;

  const logoAnimate = (timestamp) => {

    var runtime = timestamp - start
    var progress = Math.min(runtime / dur, 1)
    const position = progress * dist;

    applyTransform(position);

    if (runtime < dur) {
      requestAnimationFrame(logoAnimate)
    }
  }
  requestAnimationFrame(logoAnimate)
}

function applyTransform(position) {
  for (let i = 0; i < pf.length; i++) {
    setTimeout(function() {
      pf[i].style.transform = `translate3d(${position}px,0,0)`
    }, 100 * i)
  }
}

document.getElementsByTagName('button')[0].addEventListener('click', shiftLetters);

#wrapper {
  display: flex;
  position: absolute;
  -webkit-transform: translate(-50%, 10%);
  transform: translate(-50%, 10%);
  top: 50%;
  left: 50%;
}

.pf {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 2px;
  background-color: red;
}

button {
  display: block;
  margin-top: 50px;
}

<div id="wrapper">
  <div class="pf"></div>
  <div class="pf"></div>
  <div class="pf"></div>
  <div class="pf"></div>
</div>
<button>animate</button>