【JS动画】缓动动画封装

效果

没有效果，自己去调用试效果

技术点

定时器，内置函数使用，思维

实现

<script>
        // 要运动的盒子必须加定位
        // 简单动画封装,obj 目标对象 target 目标位置 callback 回调函数
        function animate(obj, target, callback) {
            // 给不同的元素指定不同的定时器obj.timer
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案，让元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器里面
                // 把步长值改为整数，不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                // 如果step是正值，往大了取，负值，往小了取
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画效果(清除动画)
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    if (callback) {
                        callback();
                    }
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式： （目标值 - 现在的位置） / 10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15); //推荐秒数为15毫秒
        }
    </script>