JS缓动动画原理

最新推荐文章于 2022-07-02 23:49:38 发布

是小佚啊

最新推荐文章于 2022-07-02 23:49:38 发布

阅读量266

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/qq_42156918/article/details/108213539

版权

笔记专栏收录该内容

18 篇文章 2 订阅

订阅专栏

<body>
    <button class="btn300">小刘300</button>
    <button class="btn800">小刘800</button>
    <div>小刘</div>
    <script>
   	 	//匀速动画 就是 盒子当前的offsetLeft +  固定值
        //缓动动画 就是 盒子当前的offsetLeft +  变化的值（（目标值 - 现在的位置） / 10）  注意步长向上取整
        //缓动动画原理    就是让元素的运动速度有所变化 让速度慢慢降下来
        //思路
        //1.让盒子每次移动的距离慢慢变小，  速度就会慢慢落下
        //2.核心算法： （目标值 - 现在的位置） / 10（份数 可以改变）  做为每次移动的距离长
        //3.停止条件： 让当前盒子位置等于目标位置就停止定时器
        var btns = document.querySelectorAll('button');
        var div = document.querySelector('div');
        //简单动画封装   obj:目标对象  target:目标位置   
        function animate(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                //（目标值 - 现在的位置） / 10（份数 可以改变）  做为每次移动的距离长
                //定义步长  因为是不断变化的所以写到定时器里面
                //会出现小数的情况  如8.1  step正数  正着走时  就向上取整
                //step负数  倒着走时  就向下取整
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style.left = obj.offsetLeft + step + 'px';
                if (obj.offsetLeft == target) {
                    //停止定时器
                    clearInterval(obj.timer);
                }
            }, 15);
        }
        btns[0].addEventListener('click', function() {
            animate(div, 300);
        })
        btns[1].addEventListener('click', function() {
            animate(div, 800);
        })

        
    </script>
</body>