原生JavaScript的定时器做简单动画

动画的原理

多张连续的静态画面在很短的时间内依次出现, 就可以产生动画效果, 每一个时刻对应的画面我们称之为"帧", 一秒内闪过多少张图片就是多少帧, 帧数越高, 画面越流畅

定时器 – setInterval()函数

setInterval从字面上理解, 意思是"设置间隔", 函数里有两个参数, 第一个参数是一个函数(事件), 第二个参数就是时间间隔, 单位是毫秒. 所以这个函数可以简单理解为setInterval(事件,间隔) 也就是setInterval(函数,数字) , 函数就是事件, 间隔用数字表示嘛!

理解定时器怎么做到动画效果

setInterval()函数的意思就是每隔多少毫秒做一次某件事
举个栗子:
setInterval(往右平移1mm,30), 它的意思就是每隔30毫秒往右平移1mm, 试想下, 动画不就成了吗?

动手测试

HTML部分:

<button id="btn" style="position: absolute" onclick="move()">我是按钮</button>

JavaScript部分:

<script>
    function move() {
        var oBtn = document.getElementById("btn");
        setInterval(function () {
            oBtn.style.left = oBtn.offsetLeft + 2 + "px";
        }, 30)
    }
</script>

以上表述的效果是点击按钮之后, 按钮每隔30毫秒向右平移2个像素点

能动起来了, 但是有缺陷: 多次点击按钮会导致按钮运动的越来越快, 原因是每次点击都开起了一个新的定时器, 多个定时器同时发挥效果就会导致这样的现象发生.
解决办法是: 每点击一次, 开启新的定时器时把上一个定时器关掉, 把定时器赋值给一个变量, 关掉定时器用的是clearInterval(定时器名字)函数

改进后的JS代码:

<script>
    var timer = null;
    function move() {
        clearInterval(timer);
        var oBtn = document.getElementById("btn");
        timer = setInterval(function () {
            oBtn.style.left = oBtn.offsetLeft + 2 + "px";
        }, 30)
    }
</script>

注意点

本例中我们选择的运动对象是button本身, 运动对象的定位属性必须设置为absolute, 即把原本所占的位置释放掉, 不然会导致无法运动或者异常运动