js 缓动动画原理

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

m0_47294990

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

阅读量142

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47294990/article/details/107652479

版权

 <style>
        div {
            position: absolute;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <button class="btn500">点击就走到500</button>
    <button class="btn800">点击就走到800</button>
</body>
<script>
    //缓动动画的原理就是  让盒子每次移动的距离慢慢变小,速度就会慢慢落下来;
    // 核心算法 就是  (  目标值  - 现在的位置 ) / 10 作为每次移动的步长 ;
    //步长值 一定要写在定时器的里面   每次定时器运行的时候才会从新计算当前的位置
    let div = document.querySelector('div');
    let btn500 = document.querySelector('.btn500');
    let btn800 = document.querySelector('.btn800');
    function anmiate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            //计算步长值    
            //把步长值改成整数  不要出现小数的问题
            let step = Math.ceil((target - obj.offsetLeft) / 10);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
            }
            //把每次加的步长 变成一个慢慢变小的值  步长公式  ( 目标公式 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + 'px'
        }, 30)
    }
    btn500.addEventListener('click', function () {
        anmiate(div, 500)
    });
    btn800.addEventListener('click', function () {
        anmiate(div, 800)
    })
</script>

m0_47294990

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 缓动动画原理

<style> div { position: absolute; top: 100px; width: 200px; height: 200px; background-color: blueviolet; } </style></head><body> <div><.
复制链接

扫一扫