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

所以我有一个使用CSS3过渡元素来移动页面。我试图看看页面上该动画的实际输出FPS是如何的（例如，如果页面以5FPS输出，则从0px移动到10px的div在过渡值1s时应该报告2px，4px， 6px等）。JS获取动画元素的当前位置

相反，我只是得到了我已经设置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可以比页面可以运行得更快，我试图避免。

来源

2015-11-03 MineAndCraft12

您可以使用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/

来源

2015-11-03 04:49:09 dcochran

+1快速的答案和参考惊人的功能（希望我能+10），但因为我问一个不使用jQuery（试图使我的项目完全基于自己的代码，并为其他人也可能正在寻找它），我不认为我可以在技术上将它算作答案。但是，巨大的感谢，因为在研究这个requestAnimationFrame之后，我发现我可以用它来进行我的FPS计数，我一直在试图弄清楚这些年龄。不要太难，但如果你或任何人很快回答没有注意到：''我没有使用jQuery动画，因为许多人已经回答了'' – MineAndCraft12

我会替换jQuery部分 – dcochran

Welp，看起来像答案！目前无法进行测试，因为时间很短，但标记已回答！谢谢！ – MineAndCraft12

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

回答

相关问题