原生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" style="width:0">0%</div>
    <button id="btn">load</button>
<script>
    var btn=document.getElementById('btn');
    var div=document.getElementsByClassName('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);
        }
    }

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方法没有设置间隔时间，间隔时间由浏览器自动设置最佳间隔。

参考链接：深入理解定时器

原生JS实现动画的方法

猜你喜欢