多种方法实现web动画

前言

直至如今，已经有许多方法可以实现web动画效果了。就css实现的动画和js实现的动画我所知道的就有很多种，它们虽然都可以在一定程度上实现动画效果，但是在性能上还是有一定的差别的。一般来说，前端想要实现流畅的动画效果，建议使用css动画。如果使用js实现动画，建议前端使用requestAnimationFrame这个接口实现。

我所知道的方法有以下几种：

（1）css动画：animation + @keyframes；

（2）css动画：transition；

（3）js动画：requestAnimationFrame()；

（4）js动画：setInterval()；

（5）js动画：setTimeout()；

1.css动画：animation + @keyframes

用法

animation语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

（1）animation中的name是自定义的，@keyframes后的名称必须和name保持一致。

（2）通过 @keyframes 规则创建动画，以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div{
    animation: mymove 5s infinite;
	-webkit-animation: mymove 5s infinite;	/* Safari 和 Chrome */
}
@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
	from {top:0px;}
	to {top:200px;}
}

兼容

Internet Explorer 9以及更早的版本不支持 @keyframe 规则或 animation 属性。

例子

例子来自使用 CSS3 实现超炫的 Loading（加载）动画效果 ，觉得挺有想法的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .spinner {
            margin: 100px auto;
            width: 50px;
            height: 60px;
            text-align: center;
            font-size: 10px;
        }

        .spinner > div {
            background-color: #67CF22;
            height: 100%;
            width: 6px;
            display: inline-block;
            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
            animation: stretchdelay 1.2s infinite ease-in-out;
        }

        .spinner .rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .spinner .rect3 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .spinner .rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .spinner .rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes stretchdelay {
            0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
            20% { -webkit-transform: scaleY(1.0) }
        }

        @keyframes stretchdelay {
            0%, 40%, 100% {
                transform: scaleY(0.4);
                -webkit-transform: scaleY(0.4);
            }
            20% {
                   transform: scaleY(1.0);
                   -webkit-transform: scaleY(1.0);
               }
        }
    </style>
</head>
<body>
<div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>
</body>
</html>

效果图：

2.css动画：transition

transition是网页上的过渡动画，变化的逐渐过渡效果，简称过渡动画。

语法

transition: *property duration timing-function delay*;

值 描述
transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

如何触发过渡？

可以通过伪类触发（:hover :focus :checked），也可以通过js事件触发。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transition过渡动画</title>
    <style>
        .effect{ float: left; position: relative;  width: 320px;  height: 267px;  overflow: hidden;  margin: 20px;  }
        .effect .text-desc{  position: absolute;  left: 0;  top: 0;  background-color: #fff;  height: 100%;  width: 100%;  opacity: 0;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  color: #000;  text-align: center;  }
        .image-box{  width: 100%;  height: 100%;  }
        .image-box img{  display: block;  width: 100%;  height: 100%;  transition: 0.5s;  }
        h3 {  font-size: 20px;  margin: 5px 0 10px;  }
        p {  font-weight: 300;  line-height: 20px;  font-size: 14px;  margin-bottom: 15px;  }
        .btn { display: inline-block;  padding: 5px 10px;  font-size: 14px;  color: #fff;  border: 2px solid #4d92d9;  background-color: #4d92d9;  text-decoration: none;  transition: 0.4s;  }
        .btn:hover{ background-color: transparent; color: #4d92d9; }

        .effect-one:hover img{transform: scale(1.2);}
        .effect-one .text-desc{ opacity: 0.9;  top: -100%;  transition: 0.5s;  padding: 45px 20px 20px;  }
        .effect-one:hover .text-desc{top: 0;}

        .effect-two .text-desc{transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; padding: 45px 20px 20px;}
        .effect-two:hover .text-desc{transform: none; opacity: 1;}
        .effect-two:hover img{transform: translateY(100%)}

        .effect-three img{transition: 0.5s; position: relative; width: 100%; right: 0;}
        .effect-three:hover img{right: 50%;}
        .effect-three .text-desc{transform: perspective(600px) rotateY(-90deg); transform-origin: right center 0; width: 50%; position: absolute; left: auto; right: 0; top: 0;  padding: 18px 10px; transition: 0.5s;}
        .effect-three:hover .text-desc{opacity: 1; transform: perspective(600px) rotateY(0deg); z-index: 99;}
    </style>
</head>
<body>
<div class="effect effect-one">
    <div class="image-box">
        <img src="img/bg.jpg">
    </div>
    <div class="text-desc">
        <h3>Your Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="btn">Learn more</a>
    </div>
</div>
<div class="effect effect-two">
    <div class="image-box">
        <img src="img/bg.jpg">
    </div>
    <div class="text-desc">
        <h3>Your Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="btn">Learn more</a>
    </div>
</div>
<div class="effect effect-three">
    <div class="image-box">
        <img src="img/bg.jpg">
    </div>
    <div class="text-desc">
        <h3>Your Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="btn">Learn more</a>
    </div>
</div>
</body>
</html>

效果如图所示：

3.js动画：requestAnimationFrame()

html5 提供了一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧 。

优势

由系统来决定回调函数的执行时机。requestAnimationFrame的步伐跟着系统的屏幕刷新频率走，它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

###兼容性

如何解决兼容性问题？

Opera浏览器的技术师Erik Möller对它进行了优雅降级，不仅解决了IE11以下不兼容的问题，而且解决了不同浏览器带有不同前缀的问题，从而使得requestAnimationFrame能更好的兼容各种浏览器。

github代码链接

用法

用法和setInterval类似，定义一个ID接收requestAnimationFrame动画。使用cancelAnimationFrame(ID); 语句结束动画。

canvas动画要结合requestAnimationFrame()实现。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .container{
        position: relative;
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .circle{
        width: 1px;
        height: 200px;
        -webkit-transform-origin: bottom center;
        -moz-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        -o-transform-origin: bottom center;
        transform-origin: bottom center;
        margin-left: 200px;
    }
    .ball{
        width: 20px;
        height: 20px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: red;
    }
    #btn,#pause{
        width: 80px;
        height: 30px;
        border: 1px solid #000;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        margin-bottom: 20px;
    }
</style>
<div id="btn">button</div>
<div id="pause">pause</div>
<div class="container">
    <div id="circle" class="circle"><div id="ball" class="ball"></div></div>
</div>
<script src="js/requestAnimationFrame.js"></script>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    var circle = document.getElementById("circle");
    var pause = document.getElementById("pause");
    var timer;
    btn.onclick = function () {
        var i= 0;
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(
            function fn() {
                i++;
                if(i<= 360){
                    circle.style.transform = 'rotate('+ i +'deg)';
                    timer = requestAnimationFrame(fn);
                }else{
                    cancelAnimationFrame(timer);
                }
            }
        )
    }
    pause.onclick = function () {
        cancelAnimationFrame(timer);
    }
</script>
</body>
</html>

效果如图所示：

4.js动画：setInterval()

定义

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval()被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInterval() 用法

setInterval()返回一个 ID（数字），可以将这个ID传递给clearInterval()以取消执行。

其实，jQuery中animate()函数就是由定时器实现的。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo{
            width: 100px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="demo"></div>
<script type="text/javascript ">
    /*获取元素属性函数*/
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return window.getComputedStyle(obj,null)[attr];
        }
    }
    //多属性运动框架
    function animate(obj,json,fn){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var flag = true;//判断停止计时器
            for(var attr in json){
                //利用attr遍历json数组，attr就是json的属性
                var current = 0;//初始值
                if(attr=='opacity'){
                    current=Math.round(parseInt(getStyle(obj,attr)*100));
                }else{
                    current=parseInt(getStyle(obj,attr));
                }
                var step = (json[attr] - current)/10;//json[attr];
                //就是我们传进来的，想要走到的位置，所以就是目标值，current就是初始值，也就是：（目标值-初始值）/10=步长
                step = step>0?Math.ceil(step):Math.floor(step);//步长取整
                if(attr=='opacity'){
                    obj.style.opacity=(current+step)/100;
                }else if(attr =='zIndex'){
                    obj.style.zIndex=json[attr];
                }else{
                    obj.style[attr]=current+step+'px';
                }
                if(current!=json[attr]){
                    flag=false;
                }
            }
            if(flag){
                clearInterval(obj.timer);
                if(fn){
                    fn();
                }
            }
        },10);
    }

    window.onload = function () {
        var demo = document.getElementById("demo");
        demo.onmouseover = function(){
            animate(demo,{width:200,height:100})
        };
        demo.onmouseout = function(){
            animate(demo,{width:100,height:50})
        };
    }

</script>

</body>
</html>

效果如图所示：

5.js动画：setTimeout()

定义

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

注意：setTimeout() 方法要结合递归实现动画。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setTimeout</title>
    <style>
        #container{  width:100px;height:100px; background: red;  }
        #btn{ width:60px;height:40px;line-height:40px;margin-top:20px;border: 1px solid #000;  text-align: center;  cursor: pointer;  }
    </style>
</head>
<body>
<div id="container"></div>
<div id="btn">click</div>
<script>
    window.onload = function(){
        var container = document.getElementById('container');
        var btn = document.getElementById('btn');
        //Params: i 为起始高度，num为预期高度
        function render(i, num) {
            i++;
            container.style.width = i + 'px';
            if(i < num){
                setTimeout(function() {
                    console.log(i);
                    render(i, num);
                },10);
            }
        };
        btn.onclick = function(){
            render(100, 200);
        };
    };
</script>
</body>
</html>

效果如图所示：

setTimeout() 方法、setInterval() 方法的区别？

  1. setInterval()比setTimeout()计时更加准确；

  2. setInterval()能自动将动画函数插入执行队列，实现起来更方便直观，不用重复设置计时器；而setTimeout()每次动画函数结束时，需要再重新设置一次计时器函数（一般使用递归），所以当setTimeout()的执行步调和屏幕的刷新步调不一致时，有可能产生丢帧现象，也就是动画卡顿；

  3. setTimeout()实现动画不会阻塞执行队列，而setInterval()会，所以setInterval()可能会产生时间误差；

    ​

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>