原⽣JS实现动画的⽅法
有3种⽅法
setTimeout、setInterval、requestAnimationFrame
前两种⽅法的缺陷是需要⾃⼰设置动画帧的刷新时间。时间太短，浏览器来不及处理，时间太长，动画⼜不流畅。requestAnimationFrame⽅法是h5提供的⼀种专门解决动画更新的API，浏览器会⾃动以最合适的频率去刷新动画。
下⾯⽤3种⽅法分别实现进度条动画效果
//html和css
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box{
background-color: lightblue;
height: 20px;
line-height: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">0%</div>
<button id="btn">load</button>
<script>
var ElementById('btn');
var ElementsByClassName('box')[0];
btn.addEventListener('click',function(){
//load1();
//load2();
//load3();
});
</script>
</body>
</html>
setTimeout⽅法
function load1(){
div.style.width=parseInt(div.style.width)+5+'px';
div.innerHTML=parseInt(div.style.width)/5+'%'
if(parseInt(div.style.width)<500){
var c=setTimeout(function(){
load1();
},16);
}else{
clearTimeout(c);
box sizing
}
}
setInterval⽅法
function load2(){
div.style.width=parseInt(div.style.width)+5+'px';
div.innerHTML=parseInt(div.style.width)/5+'%';
var c=setInterval(function(){
if (parseInt(div.style.width)<500) {
load2();
}else {
clearInterval(c);
}
},16);
}
注意setTimeout和setInterval的区别，两种⽅法的if分别在不同的地⽅控制。
requestAnimationFrame⽅法
function load3(){
div.style.width=parseInt(div.style.width)+5+'px';
div.innerHTML=parseInt(div.style.width)/5+'%';
if(parseInt(div.style.width)<500){
var c=requestAnimationFrame(load3);
}else {
cancelAnimationFrame(c);
}
}
可以看到requestAnimationFrame⽅法没有设置间隔时间，间隔时间由浏览器⾃动设置最佳间隔。参考链接：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。