API之封装动画函数

时间 2019-11-18

原文原文链接

步骤

获取所须要的页面元素
给按钮注册点击事件，写出事件函数，事件函数里面调用封装的动画函数
封装动画函数
- 明确动画函数有两个参数，一个参数是运动的对象，另外一个函数是目标距离
- 首先先清理一次定时器（不然会不受控制）
- 获取传入对象的当前位置
- 定义一个变量记录每次对象移动多少距离
- 若是传入对象的当前距离小于目标距离则走正数，不然走负数
- 肯定每次移动后的距离
- 判断传入对象是否到达目标位置，若是目标距离-当前距离的绝对值 > 每次要移动的距离的绝对值，那么传入对象正常移动，不然清理定时器，直接到达目标位置

对象要移动就要脱离文档流
** 若是样式的代码在style标签内设置，那么外面就没法获取到他的值，因此须要用offset来获取**
若是样式的代码在标签的属性里设置，那么它就能够被获取

详细代码函数

<body>
        <input type="button" value="移动到400px" id="btn1">
        <input type="button" value="移动到800px" id="btn2">
        <div id="box"></div>
        <script>
          
            var btn1 = document.getElementById('btn1');
            var btn2 = document.getElementById('btn2');
            var box = document.getElementById('box');
            
            btn1.onclick = function () {
                 animation(box, 400);
            }
    
            btn2.onclick = function () {
                 animation(box, 800);
            }
            function animation (element, target) {
                //先清理定时器
                clearInterval(element.timeId);
                element.timeId = setInterval (function() {
                    //获取div当前位置，
                    var current = element.offsetLeft;//数据类型，没有px
                    // div 每次移动多少像素
                    var step = 10;
                    //当前位置小于目标位置，走正数，不然走负数
                    step = current < target ? step : -step;
                    //每次移动后的距离
                    current += step;
                    //判断当前位置是否到达目标位置
                    if(Math.abs(target - current) > Math.abs(step)) {
                        element.style.left = current + 'px';
                    }else {
                        clearInterval(timeId);
                        //最后一次剩余要走的步数小于每次要走的步数，那么直接到达终点
                        element.style.left = target + 'px';
                    }
                },20);
            }
        </script>
    </body>