js中使用requestAnimationFrame创建动画

2016-02-22    编辑:lanve     点击(
一起来看一个requestAnimationFrame创建动画的例子,这个例子能够对各位带来帮助了,具体如下。


requestAnimationFrame是什么?

在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。如今有一个好消息,浏览器开发商们提供了这个requestAnimationFrame()针对动画效果的API函数,你可以把它用在DOM上的风格变化或画布动画好或WebGL中。

例子


<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>如何使用requestAnimationFrame创建动画</title>
</head>
<body>
<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<script>
 
// http://paulirish.com/2011/requestanimationframe-for-smart-animating
// http://www.webhek.com/requestanimationframe/
// http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
 
var feng={
    progress:0,
    ele:null,
    test:function(){
 
        feng.progress++;
        feng.ele=document.getElementById("test");
        feng.ele.style.width = feng.progress + "%";
        feng.ele.innerHTML=feng.progress + "%";
 
        if(feng.progress<100){
            requestAnimFrame(feng.test);
        }
    },
    init:function(){
        feng.test();
    }
}
 
window.addEventListener('load', feng.init, false);
 
</script>
 
</body>
</html>