tx4-封装运动框架基本函数-多属性-定时器-透明度_var flag = true为什么一定要写在写在for(var attr in json)外面-优快云博客

博客探讨了tx4封装的运动框架中如何处理多属性动画和使用定时器进行动画控制。文章提到，在IE环境下可能存在一些问题，并详细解释了1.6回调函数的作用，即动画完成后执行的函数。此外，还讨论了1.7 in运算符的用法，强调其要求左侧操作数为字符串或可转化为字符串，右侧操作数为数组或对象，用于检查JSON对象中是否存在特定属性。

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

按理说在ie下应该可以了，但是自己试着好像还是不行呢
1.6回调函数
等动画执行完毕再去执行的函数
1.7 in运算符
in运算符也是一个二元运算符，但是对于运算符左右两个操作数的要求比较严格。in运算符要求第1个（左

边的）操作数必须是字符串类型或者可以转换为字符串类型的其他类型，而第2个（右边的）操作数必须是

数组或者对象。只有第1个操作数的值是第2个操作数的属性名，才会返回true，否则返回false.
in用来判断json里面有没有某个属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 5px;
            background-color: pink;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function () {
        animate(box,{width:200,height:300,top:400,opacity:0.4},function(){alert("我是回调函数")});
    }
    btn400.onclick = function () {
        animate(box,{left:100})
    }
    //多属性运动框架
    function animate(obj,json,fn){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var flag = true; //用来判断是否停止定时器 一定要写在遍历外面
            for(var attr in json){
                var current =parseInt(getStyle(obj,attr)); //数值
                var step = (json[attr] - current) /10;
                step = step>0 ? Math.ceil(step) : Math.floor(step);
                if(attr == "opacity"){ //判断用户有没有输入opacity
                    if("opacity" in obj.style){ //判断浏览器是否支持opacity
                        obj.style.opacity = json[attr];
                    }else{
                        obj.style.filter = "alpha(opacity = "+json[attr]*100+")";
                    }
                }else{
                    obj.style[attr] = current + step + "px";
                }
                if(current != json[attr]){ //只要目标与json中任意一个值不等 就不能停止定时器 这个一定写在定时器里面
                    flag = false;
                }
            }
            if(flag){
                clearInterval(obj.timer);
                if(fn){fn();}
            }
        },30);
    }
    function getStyle(obj,attr){ //获取属性值
        if(obj.currentStyle){ //i3
            return obj.currentStyle[attr];
        }else{
            return window.getComputedStyle(obj,null)[attr]; //w3c
        }
    }
</script>