requestAnimationFrame定时器实现动画效果

window.requestAnimationFrame

• 计时器一直是javascript动画的核心技术。
• 大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。
• 而setTimeout和setInterval的问题是，它们都不精确。
• requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，提高系统性能，改善视觉效果
• requestAnimationFrame是由浏览器专门为动画提供的API，不需要设置时间间隔。
• IE9-浏览器不支持该方法

上代码

1.启动定时器

    requestID = requestAnimationFrame(callback); 
		//控制台输出1和0
	var timer = requestAnimationFrame(function(){
	    console.log(0);
	}); 
	console.log(timer);//1

2.cancelAnimationFrame方法用于取消定时器

	//控制台什么都不输出
	var timer = requestAnimationFrame(function(){
	    console.log(0);
	}); 
	cancelAnimationFrame(timer);
	也可以直接使用返回值进行取消
	var timer = requestAnimationFrame(function(){
	    console.log(0);
	}); 
	cancelAnimationFrame(1);

3.应用

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
    myDiv.style.width = '0';
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        if(parseInt(myDiv.style.width) < 500){
            myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
            myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>