JavaScript 封装动画函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            position:absolute;
            top:100px;
            left:0;
            width:100px;
            height:100px;
            background-color:green;
        }

        input{
            height: 50px;
        }

    </style>
</head>
<body>
<br>
    <input type="button" value="开始将下面的元素向右移动" id="start">
    <input type="button" value="点击停止元素的移动" id="ttt">
    <div class="box" id="box">

    </div>

    <script>
        var start = document.getElementById("start");
        var box = document.getElementById("box");
        //补充 获取计算后样式的方法
        console.dir(window.getComputedStyle(box).width);
        console.dir(window.getComputedStyle(box).height);
        console.dir(window.getComputedStyle(box).backgroundColor);
        console.dir(window.getComputedStyle(box)["opacity"]);

        //box 是需要运动的元素
        //多属性运动
        //共同点：总时间，时间间隔是相同的，自定义
        //不同的：起始位置（通过程序方法自动获取当前页面最终显示效果）和结束位置（自定义指定的）

        //函数参数
        //参数1：元素对象，它要进行运动
        //参数2：结束位置，以对象数据方式传递
        //参数3：总时间

        //调用函数
        animate(box,{left: 400,width: 300,height: 200,opacity: 1},2000);

        //自定义动画函数
        function animate(ele,end,time){
            //已知结束位置，总时间，时间间隔 50，缺少起始位置
            //起始位置要根据结束位置提供的属性进行获取
            //起始位置的对象，需要先定义一个空对象
            var now = {};
            //var start = {};
            //start.left = 100;
            //end 对象遍历，获取属性名



            for(var k in end){
                now[k] = parseFloat(window.getComputedStyle(ele)[k]);       
                }
                //console.log(start);
                //自定义时间间隔
                var interval = 50;
                //计算总次数
                var maxCount = time / interval;
                //次数累加器
                var count = 0;
                //对象中的每个属性都有自己的步长，也可以放到一个步长对象中
                var step = {};
                //遍历结束对象，计算每个属性的步长




                for(var k in end){
                    step[k] = (end[k] - now[k]) / maxCount;
             

            }
            //console.log(step);

            //==========================准备工作结束，开启定时器=======================================


            var timer;
            timer = setInterval(function(){
            //让每个属性发生变化，赋值给now对象中的一项
                for (var k in end){
                    now[k] += step[k];
                };
                //累计运动次数
                count++;



                //判断定时器是否结束
                if(count >= maxCount){
                    //拉终停表
                    for(var k in end){
                        now[k] = end[k];
                    };
                    clearInterval(timer);

                };




                //赋值给对应元素对象属性
                for (var k in now){
                    //判断如果是 不透明度属性，不要加px属性
                    if(k === "opacity"){
                        ele.style[k] = now[k];

                    }else{
                        ele.style[k] = now[k] + "px";

                    }
                }


            },interval);

        };



    </script>
    
</body>
</html>