关于requestAnimationFrame demo

最新推荐文章于 2022-11-08 18:18:33 发布

Rki-dor

最新推荐文章于 2022-11-08 18:18:33 发布

阅读量88

点赞数

原文链接：http://www.cnblogs.com/daranran/p/4730012.html

版权

<html>
<body>
<div id="demo" style="position:absolute; left:0px; top:100px;width:100px; height:100px; background:#cc0;"></div>
<div id="time"></div>
<script>
var timeDiv = document.getElementById('time'),
count = 0;
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| window.oRequestAnimationFrame
|| function(callback) {
setTimeout(callback, 1000 / 60);
};
function animate(element, name, from, to, time) {
time = time || 800; // 默认0.8秒
var style = element.style,
startTime = (new Date()).getTime();

function go(timestamp) {

timestamp = timestamp || (new Date()).getTime() - startTime;
var progress = timestamp - startTime;

//timeDiv.innerHTML += progress + '\t\t';
count++;
if (timestamp >= time) {
console.log((new Date()));
style[name] = to + 'px';
//timeDiv.innerHTML += '<br>have do ' + count + ' setting';
return;
}

var now = (to - from) * (timestamp / time);
style[name] = now.toFixed() + 'px';
requestAnimationFrame(go);
}

style[name] = from + 'px';

requestAnimationFrame(go);
}
animate(document.getElementById('demo'), 'left', 0, 400, 1000);
</script>
</body>
</html>