javascript - JS 获取动画元素的当前位置

Question

所以我有一个元素使用 CSS3 过渡在页面上移动。我试图查看页面上该动画的实际输出 FPS 是多少(例如，如果页面以 5FPS 输出，一个 div 从 0px 移动到 10px，过渡值为 1s 应该报告 2px，4px， 6px 等)。

相反，我只是得到我已经设置 div 位置的任何值。

// css has defined a transition of 10s on the moving div
document.getElementById("movingDiv").style.left = "0px";
console.log(document.getElementById("movingDiv").style.left); //outputs 0px
document.getElementById("movingDiv").style.left = "100px";
window.setTimeout(function(){
    console.log(document.getElementById("movingDiv").style.left); //outputs 100px instead of, for instance, 43px or wherever the div would visually appear to be
}, 3000);

这不是确切的代码，只是一些足以说明我的观点的通用代码。

重申这个问题，我如何找到一个元素在一个位置和另一个位置之间的转换过程中视觉上看起来的位置？我没有尽可能多地使用 jQuery 动画其他人已经回答了，而不仅仅是想计算元素应该的位置。我想查看元素实际出现在页面上的位置。我也想知道这是否也可以在屏幕外工作(比如在可见窗口的左侧或上方)。

为了帮助理解为什么我实际尝试这样做，是因为我正在尝试获取页面的 FPS 输出。我见过许多页面输出可怕的 FPS 但 Javascript 仍然输出超过 100 FPS 的情况，因为 Javascript 的运行速度比页面本身呈现的速度快，我试图避免这种情况。

Answer 1

您可以使用 window.requestAnimationFrame:

  var moving = false,
      el = document.getElementById("mover");
  el.className = el.className + " move-right";
  el.addEventListener('transitionend', function () {
    moving = true;
  });

  function getPosition() {
    var rect = el.getBoundingClientRect()
    console.log(rect.top, rect.left);
    if (!moving) {
      window.requestAnimationFrame(getPosition);
    }
  }
  window.requestAnimationFrame(getPosition);

http://jsfiddle.net/ob7kgmbk/1/