javaScript动画基础

为了做好导航菜单，有时候需要在菜单下拉的时候实现动画效果，本文记录实现动画核心要用到两个函数，setTimeout 与 setInterval

过程和原理

实现一个匿名函数并能自己执行

1
2
3

(function () {
    // some code
}) ()

提到闭包，自动执行的效果，在函数后加一对 “()” 表示自动执行，前边的匿名函数需要用 “()” 包起来，这样才能为宿主（我们的BOM环境）理解，里面的 function(){} 这就是个匿名函数。

实现动画

以改变一个box的透明度

1	<div id="animation"></div>

要实现 animation 的透明渐变，需要不断改变其透明度 opacity

for (var i = 0; i < 10; i++) {
    setTimeout((function (pos) {
        return function () {
            someAnimation(pos);
        }
    })(i / 10), i * 100)
}

这段代码有一定的难度，首先解释一下 setTimeout 在此处的用法

1
2
3

setTimeout((function () {
    // some code
})(i / 10), i * 100)

setTimeout 第一个参数为要执行的函数，第二个参数为时间参数，意为多久后开始执行，因 javascript 没有块的概念，作用域范围是以函数为准的，所以我们这里使用的闭包，实现原理如下：

(function () {
    return function () {
    }
})()

在这里面执行for循环，达到我们想要的结果，如果我们不使用闭包，代码会如下：

for (var i = 0; i < 10; i++) {
    setTimeout(function (pos) {
        someAnimation(pos);
    }(i / 10), i * 100)
}

这样的for循环只会执行一次，即 i = 9 时。到目前为止的完整代码如下：

(function () {
    function someAnimation(args) {
        document.getElementById("animation").style.opacity = args;
    }

    for (var i = 0; i < 10; i++) {
        setTimeout((function (pos) {
            return function () {
                someAnimation(pos);
            }
        })(i / 10), i * 100)
    }
})()

这样实现了 id 为 animation 的 box 透明度从 0 到 1 的一次变化

使用 setInterval 实现不间断变化

setInterval 有两个参数，第一个是要执行的函数，第二个是执行间隔时间

(function () {
    function someAnimation(args) {
        document.getElementById("animation").style.opacity = args;
    }

    setInterval(function () {
        for (var i = 0; i < 10; i++) {
            setTimeout((function (pos) {
                return function () {
                    someAnimation(pos);
                }
            })(i / 10), i * 100)
        }
    }, 2000);
})()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title></title>
        <style type="text/css">
            #animation {
                width: 500px;
                height: 350px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="animation"></div>
        <script type="text/javascript">
            (function () {
                function someAnimation(args) {
                    document.getElementById("animation").style.opacity = args;
                }
        
                setInterval(function () {
                    for (var i = 0; i < 10; i++) {
                        setTimeout((function (pos) {
                            return function () {
                                someAnimation(pos);
                            }
                        })(i / 10), i * 100)
                    }
                }, 2000);
            })()
        </script>
    </body>
</html>