匀速动画案例

先搭架子：

        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
        
        .line1,
        .line2 {
            width: 500px;
            height: 20px;
            background: blue;
        }
        
        .line2 {
            width: 200px;
            background: purple;
        }

    <button id="start1">开始到500</button>
    <button id="start2">开始到200</button>
    <button id="end">结束</button>
    <div class="box"></div>
    <div class="line1"></div>
    <div class="line2"></div>

设计逻辑结构：

        //1.获取需要操作的元素
        const satrtBtn1 = document.querySelector("#start1");
        const satrtBtn2 = document.querySelector("#start2");
        const endBtn = document.querySelector("#end");
        const oBox = document.querySelector(".box");
        let timer = null;

        //2.监听按钮点击
        /*
        satrtBtn1.onclick = function() {
            clearInterval(timer);
            //0.定义变量 记录终点的位置
            const target = 500;
            timer = setInterval(function() {
                //1.拿到元素当前的位置
                let begin = parseInt(oBox.style.marginLeft) || 0;
                //2.定义变量记录步长
                let step = 13;
                //3.计算新的位置
                begin += step;

                // if (begin >= target) {或
                if ((target - begin) <= step) {
                    clearInterval(timer);
                    begin = target; //复位
                }

                //4.重新设置元素的位置
                oBox.style.marginLeft = begin + "px";
            }, 100);
        };

        satrtBtn2.onclick = function() {
            clearInterval(timer);
            //0.定义变量 记录终点的位置
            const target = 200;
            timer = setInterval(function() {
                //1.拿到元素当前的位置
                let begin = parseInt(oBox.style.marginLeft) || 0;
                //2.定义变量记录步长
                let step = -13;
                //3.计算新的位置
                begin += step;

                // console.log(Math.abs(target - begin), Math.abs(step));

                // if (begin >= target) {或
                if (Math.abs(target - begin) <= Math.abs(step)) {
                    clearInterval(timer);
                    begin = target; //复位
                }

                //4.重新设置元素的位置
                oBox.style.marginLeft = begin + "px";
            }, 100);
        };
        */

        endBtn.onclick = function() {
            clearInterval(timer);
        };

        satrtBtn1.onclick = function() {
            linearAnimation(oBox, 500);
        };

        satrtBtn2.onclick = function() {
            linearAnimation(oBox, 200);
        };

        //封装方法
        function linearAnimation(ele, target) {

            clearInterval(timer);

            timer = setInterval(function() {
                //1.拿到元素当前的位置
                let begin = parseInt(ele.style.marginLeft) || 0;

                //2.定义变量记录步长
                /*
                0-500=-500 12
                500-200=300 -12
                */
                let step = (begin - target) > 0 ? -13 : 13;
                //3.计算新的位置
                begin += step;

                // if (begin >= target) {或
                if ((target - begin) <= step) {
                    clearInterval(timer);
                    begin = target; //复位
                }

                //4.重新设置元素的位置
                ele.style.marginLeft = begin + "px";
            }, 100);
        }