JavaScript--缓冲动画

最新推荐文章于 2022-09-18 16:59:02 发布

快乐的小火猴

最新推荐文章于 2022-09-18 16:59:02 发布

阅读量307

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/look857857/article/details/124018608

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了JavaScript如何创建平滑的缓冲动画效果，包括使用requestAnimationFrame、缓动函数和时间戳来控制动画流畅性。通过实例代码，详细解释了如何实现从一个位置平滑过渡到另一个位置的动画过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    div {
       width: 100px;
       height: 100px;
       background: pink;
      position: absolute;
     }
</style>

 <button>action</button>
 <div></div>
 <script>
        //匀速运动 公式
        //  新的位置 = 当前位置+步长
        //缓冲动画
        //从快到慢 (减速运动)
        //步长越变越少
        // 步长 = (目标位置-当前位置)/10
        var btn = document.querySelector('button') //接收按钮
        var box = document.querySelector('div') //获取div
            //给按钮添加点击事件
        btn.onclick = function() {
            //在点击事件中写定时器
            let timer = setInterval(() => {
                //在定时器方法里面控制div的移动
                //获取当前div的偏移量
                var currentX = box.offsetLeft
                    //获取步长
                var step = (300 - currentX) / 10
                    //如果当前步长是小于0就是向下取整  如果大于0就向上取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    //控制div的移动
                box.style.left = currentX + step + 'px'
                    //到达目标位置后清除定时器
                if (Math.abs(300 - currentX) <= Math.abs(step)) {
                    clearInterval(timer)
                }
            }, 40)
        }
</script>