动画缓动效果

动画缓动效果

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路∶
1．让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2．核心算法∶(目标值-现在的位置)/ 10做为每次移动的距离步长

<style>
        div {
            /* 注意：一定要添加定位 */
            position: absolute;
            left: 0px;
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
        
        span {
            position: absolute;
            top: 150px;
            left: 0;
            display: block;
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>

<button class="btn300">让第二个盒子开始移动300</button>
    <button class="btn800">让第二个盒子开始移动800</button>
    <div>第一个盒子,到400时停下</div>
    <span>第二个盒子，到300时停下</span>
    <script>
        function animate(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn300 = document.querySelector('.btn300');
        var btn800 = document.querySelector('.btn800');

        // 调用函数
        animate(div, 400);
        btn300.addEventListener('click', function() {
            animate(span, 300);
        })
        btn800.addEventListener('click', function() {
                animate(span, 800);
            })
            // 匀速动画 就是 盒子当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>