原生JS实现动画的方法

最新推荐文章于 2023-11-05 18:22:34 发布

zzh1918

最新推荐文章于 2023-11-05 18:22:34 发布

阅读量1.5w

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_37860930/article/details/79949705

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

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

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

zzh1918

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现动画的方法

有3种方法 setTimeout、setInterval、requestAnimationFrame前两种方法的缺陷是需要自己设置动画帧的刷新时间。时间太短，浏览器来不及处理，时间太长，动画又不流畅。requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画。下面用3种方法分别实现进度条动画效果//html和css...
复制链接

扫一扫