requestAnimationFrame

CSS3动画那么强requestAnimationFrame还有毛线用?http://www.zhangxinxu.com/wordpress/?p=3695
 
 
动画函数兼容写法
window.requestAnimationFrame = window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.msRequestAnimationFrame;
 
 
 
//书写动画函数
   function step() {
      oProgress++;
      oDiv.style.width = oProgress + "px";
      oDiv.innerHTML = oProgress + "%";
      //判定
      if(oProgress < 100) {
        window.requestAnimationFrame(step); //递归调用  保证达到百分之百,能够循环调用
        //等到百分之百,停止动画
      }
   }
   //执行函数
   oRan.onclick = function() {
      //点击开始  div盒子从出事状态执行动画
      oDiv.style.width = 1 + "px"; //初始样式宽度为1px
      oProgress = 0; //初始全局进度条变量为0
      window.requestAnimationFrame(step); //调用动画方法
 
   }


posted @ 2017-04-07 15:00  sakura-sakura  阅读(133)  评论(0编辑  收藏  举报