JavaScript动画6-同时运动

系列文章导航

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

同时运动

如果我们想要同时改变元素的宽度和高度，前面的代码就不能实现了。

change(div, "width", 400);
change(div, "height", 400);

结果是，div只改变了height，并没有改变width，因为change函数一进去就clearInterval(obj.timer)，把div的定时器清除了。

我们需要想其他办法。这里用到了json。

这里我们设计成这样的形式：

animate(div, {width: 200, height: 200, opacity: 100},function(){
    alert("Finished!");
});

我们把上一节课的change函数改名为animate，更为贴切。把需要改变的属性通过一个json的形式传进animate函数，然后在函数内依次遍历json中的属性，就可以实现同时改变多个属性了。

当然，不可能真正做到同时改变多个属性，但在极短的时间内，依次改变多个属性，每个属性只改变一点点，这样就能在宏观上造成多个属性同时改变的错觉。

我们来看一下最终完成的animate函数：

function animate(obj, attrs, fn) {
    if (obj.timer) {
        clearInterval(obj.timer);
    }

    obj.timer = setInterval(function () {
        var allCompleted = true;
        for (var attr in attrs) {
            //取得当前值
            var currentValue = 0;
            if (attr == 'opacity') {
                currentValue = Math.round((parseFloat(getStyle(obj, attr)) * 100));
            } else {
                currentValue = parseInt(getStyle(obj, attr));
            }

            //计算速度
            var speed = (attrs[attr] - currentValue) / 10; //缓冲运动
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //检测停止
            if (currentValue != attrs[attr]) {
                allCompleted = false;
            }
            if (attr == 'opacity') {
                obj.style.opacity = (currentValue + speed) / 100;
            } else {
                obj.style[attr] = currentValue + speed + 'px';
            }
        }

        if (allCompleted) { //只有当所有的属性都完成,才清除定时器
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 30);
}

大部分代码都是相同的，最不同的地方是我们在定时器内加入了一个循环，依次遍历json中的属性，这样才能做到多个属性同时改变。

值得注意的是，我们设置了一个allCompleted的布尔值，只有当所有属性值都完成的时候，才清除定时器，这样才不会造成“只有一个属性完成，其他属性才完成一半，定时器就被清除了”的情况出现。

调用也非常简单：

var div8 = document.getElementById("div8");
div8.onmouseover = function () {
    var _this = this;
    animate(_this, {width: 400, height: 400, opacity: 50}, function () {
        alert("hello");
    });
};

div8.onmouseout = function () {
    var _this = this;
    animate(_this, {width: 200, height: 200, opacity: 100});
};

完成的效果图：

JS动画演示10