JavaScript动画3-多物体运动

系列文章导航

JavaScript动画1-速度动画
JavaScript动画2-缓冲运动
JavaScript动画3-多物体运动
JavaScript动画4-任意属性值
JavaScript动画5-链式运动
JavaScript动画6-同时运动
所有源代码

多物体运动

了解了一个物体怎么运动，接下来我们来了解多个物体的运动。

首先我们建立一个HTML结构：

<div id="div4">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS样式效果如下：

JS动画演示5

我们来实现一个效果，当鼠标经过时，每个方框改变它的width。

(function () {
    var lists = document.getElementById("div4").getElementsByTagName("li");
    for (var i = 0; i < lists.length; i++) {
        lists[i].timer = null; //给每个元素设置一个单独的定时器
        lists[i].onmouseover = function () {
            startMove(this, 600);
        };

        lists[i].onmouseout = function () {
            startMove(this, 200);
        };
    }

    function startMove(obj, targetWidth) {
        if (obj.timer) {
            clearInterval(obj.timer);
        }
        obj.timer = setInterval(function () {
            var speed = (targetWidth - obj.offsetWidth) / 10; //缓冲运动
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (obj.offsetWidth == targetWidth) {
                clearInterval(obj.timer);
            } else {
                obj.style.width = obj.offsetWidth + speed + 'px';
            }
        }, 20);
    }
})();

这里要注意给每一个元素设定一个单独的定时器，不然多个元素共享一个定时器会造成彼此之间的干扰。

最终的效果如下：

JS动画演示6

事实上，不仅是定时器要单独设置，凡是涉及到多个元素的变量，都要单独设置。比如我们前面说过透明度动画中的opacity变量。

//多物体透明度动画
(function () {
    var lists = document.getElementById("div5").getElementsByTagName("li");

    for (var i = 0; i < lists.length; i++) {
        lists[i].timer = null;
        lists[i].opacity = 100; //每个元素都要单独设置一个opacity
        lists[i].onmouseover = function () {
            changeOpacity(this,60);
        };
        lists[i].onmouseout = function () {
            changeOpacity(this,100);
        };
    }

    function changeOpacity(obj, targetOpacity) {
        if (obj.timer) {
            clearInterval(obj.timer);
        }
        var speed = 0;
        if (obj.opacity > targetOpacity) {
            speed = -10;
        } else {
            speed = 10;
        }
        obj.timer = setInterval(function () {
            if (obj.opacity == targetOpacity) {
                clearInterval(obj.timer);
            } else {
                obj.opacity = obj.opacity + speed;
                obj.style.opacity = obj.opacity / 100;
            }
        }, 30);
    }
})();

效果如下：

JS动画演示7