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

Question

所以我有一个元素使用 CSS3 过渡在页面上移动。我正在尝试查看页面上该动画的实际输出 FPS（例如，如果页面以 5FPS 输出，div 以 1s 的过渡值从 0px 移动到 10px 应该报告回来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 动画，并且不只是想计算元素应该的位置。我想查看元素 在页面 上的实际位置。我也想这是否也适用于屏幕外（比如在可见 window 的左侧或上方）。

为了帮助理解我为什么要这样做，我是想获取页面的 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/

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

JS Get Current Position of Animated Element

html

javascript

css

transition

frame-rate