JavaScript运动框架（四）：多值运动

最新推荐文章于 2024-05-17 11:33:12 发布

原创最新推荐文章于 2024-05-17 11:33:12 发布 · 540 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #对象 #框架

前端同时被 2 个专栏收录

61 篇文章

订阅专栏

JavaScript运动框架

8 篇文章

订阅专栏

本文介绍了一个多值运动框架的设计思路，使元素的多个属性能够同时进行缓冲运动，并确保所有属性达到目标值后才停止定时器。通过JSON形式指定各属性的目标值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多值运动，也就是对于某个对象来说，不仅仅只是其中一个属性值在变化，而是好多个，比如宽，高，字体，透明度等等同时变化

当然了，多值运动会产生一个问题，就是定时器何时关闭的问题！当然是所有的属性值都运动到目标值了才能清理定时器，也就是等最慢的。就好比十个人一起聚餐，不能等到来一个人就开吃！

前几篇讲的都是一个元素对象中某一个属性的运动，这次讲同一个元素对象中多个属性值的缓冲运动，那么每个属性都有个终点（目标点），我们把这些属性及其目标值写成一个对象的形式，或者是json状！容易产生的问题就是上面说的，这里用了共同的速度函数，但有的属性值从100 –> 101, 有的属性值从100 –> 600，你得等耗时最长的属性值到达目标值才能关闭该obj所拥有的定时器，设计的思路就是每次执行轮询函数设置一个bStob = true;在遍历扫描json中属性的时候，只要有没到到目标值的属性，就设为false，这样定时器就不会关闭，即使有的属性值已经到达终点，此时轮询依旧会执行扫描，只不过此时该属性运动速度为0了，也不会运动了。也就是之前：

if(attr == cur) {
    cleartInterval(obj.timer);
}

要增强为：

if (bStop) {
    clearInterval(obj.timer);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>运动框架(四)：多值运动</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: orange;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div1"></div>

    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        oDiv.onmouseover = function() {
            var json = {
                width: 600,
                height: 200,
                opacity: 30
            };
            startMove(this, json);
        };
        oDiv.onmouseout = function() {
            var json = {
                width: 100,
                height: 100,
                opacity: 100
            };
            startMove(this, json);
        };
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }

        function startMove(obj, json) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var bStop = true;
                for (var attr in json) {
                    var cur = 0;
                    if (attr === 'opacity') {
                        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        cur = parseInt(getStyle(obj, attr));
                    }
                    var speed = (json[attr] - cur) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (cur != json[attr]) {//凡是有未到达目标点的，一律不让定时器停下，否则有的属性不能到达目标值
                        bStop = false;
                    }
                    if (attr === 'opacity') {
                        cur += speed;
                        obj.style.filter = 'alpha(opacity:' + cur + ')';
                        obj.style.opacity = cur / 100;//Chrome,IE
                    } else {
                        obj.style[attr] = cur + speed + 'px';
                    }
                }
                //整个循环结束后，仍然保持着true，说明没有没到达目标值的属性，也就是都到了
                if (bStop) {
                    clearInterval(obj.timer);//说明所有的属性都到达了目标值
                }

            }, 30);
        }
    </script>
</body>
</html>

这里写图片描述