原生JS实现动画的方法

原创 2018年04月15日 16:18:23

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37860930/article/details/79949705

《程序员》杂志试刊一发刊词

发刊词    60年的计算机发展史,就是一部程序员历史。    “软件推动计算机,计算机推动历史”,这样的说法并不过分。中国的PC时代,也完全是一个程序员时代,严援朝、吴晓军、求伯君、王选、鲍岳桥、王...
  • ycrao
  • ycrao
  • 2000-11-24 16:59:00
  • 3136

js实现动画的方法

1.css的transition。 语法: transition: property duration timing-function delay; property:填写需要变化的css属...
  • Prince_fmx
  • Prince_fmx
  • 2017-09-10 21:04:48
  • 544

原生JS实现动画的方法

有3种方法 setTimeout、setInterval、requestAnimationFrame 前两种方法的缺陷是需要自己设置动画帧的刷新时间。时间太短,浏览器来不及处理,时间太长,动画又不...
  • qq_37860930
  • qq_37860930
  • 2018-04-15 16:18:23
  • 7

通过js实现简单的动画效果

又是一个非常无脑的东西不过一个简单的平移我居然写了快两小时被自己蠢哭了= =。 虽然只是一个非常简单的动画效果不过通过这两个小时踩了许多坑之后也算是对js的一些机制有更明确的认识。——–特别是关于获...
  • cjx1997
  • cjx1997
  • 2016-10-28 20:40:03
  • 1462

【前端动画】实现动画的6种方式

引言 通常在前端中,实现动画的方案主要有6种: javascript直接实现; SVG(可伸缩矢量图形); CSS3 transition; CSS3 animation; Canvas动画; ...
  • ImagineCode
  • ImagineCode
  • 2017-11-21 10:01:30
  • 1369

Js_动画

1. html,body{ width: 100%; height: 100%; ...
  • littlewindy520
  • littlewindy520
  • 2017-03-17 08:32:42
  • 763

CreateJS 学习4 动画、TweenJS

水平移动动画示例
  • xundh
  • xundh
  • 2017-12-16 18:30:38
  • 150

<em>js</em>心形<em>动画</em>

直接用浏览器打开可以看到一颗心的生成<em>动画</em>,可支持手机查看,Android手机可以浏览器...<em>js</em>实现<em>动画</em>效果 <em>js动画</em>效果(移动、变化效果)实现整理 <em>js</em>实现<em>动画</em>的<em>方法</em> ...
  • 2018年04月17日 00:00

velocityJS 动画使用方法

常用的属性和方法 都中文注释了 相信大家一看就会明白。可以复制代码到本地直接运行看到效果 *{margin:0;paddi...
  • u011551941
  • u011551941
  • 2016-05-20 15:25:43
  • 597

利用javascript实现简单动画效果。

利用javascript的setTimeout()函数可以实现简单的动画效果。setTimeout()函数有两个参数,第一个参数是一个字符串,其内容是将要执行的哪个函数的名字;第二个参数是一个数值,它...
  • qq_32600929
  • qq_32600929
  • 2016-11-03 11:35:55
  • 1977
收藏助手
不良信息举报
您举报文章:原生JS实现动画的方法
举报原因:
原因补充:

(最多只允许输入30个字)