JS基础-特效篇-多属性动画（JSON）

1.对象和JSON不能用for循环遍历。
实验：

<script>
    var obj = {
        "left":300,
        "top":400,
        "width":600,
        "height":600
    };
    for(var key in obj){
        console.log(obj.key);       //undefined
        console.log(key,obj[key]);  //left 300  输出：键   值
    }
</script>

2.多属性动画函数

/*
    *@description:[缓动动画函数]
    *@param:{Object}[eleObj]
    *@param:{Object}[json]
    *@date:2021/5/11
    */
    function buffer(eleObj, json) {
        clearInterval(eleObj.timer);
        var speed = 0, begin = 0,target = 0,flag = false;
        eleObj.timer = setInterval(function () {
            flag = true;
            for(var key in json){
                begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
                target = parseInt(json[key]);
                speed = (target - begin) * 0.2;
                speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
                eleObj.style[key] = begin + speed + 'px';
                if (begin !== target) {
                    flag = false;
                }
            }
            if (flag){
                clearInterval(eleObj.timer);
            }
        }, 20)
    }

页面：

<button id="btn">向左走</button>
<button id="btn1">向右走</button>
<div id="box"></div>
<script src="MyTool/MyTool.js"></script>

应用：

buffer(box, {'left':800,'top':400});

FLAG会让所有的都达到目标才会结束定时器！for会一直执行到最后一个值的！