js的缓动动画

原创已于 2022-02-16 14:06:51 修改 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #动画

于 2022-02-15 17:20:22 首次发布

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现匀速和缓动动画效果。通过监听按钮点击事件，动态改变div元素的位置，创建了两种不同动画效果。匀速动画中，div元素以固定速度平滑移动；缓动动画则根据距离目标位置的距离逐渐减慢速度，提供更真实的过渡体验。同时，还封装了一个通用的动画函数，接受动画对象、目标位置和回调函数作为参数，实现了更灵活的动画控制。

一、匀速动画

<body>
    <button>点击移动</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            clearInterval(div.timer || null);
            div.timer = setInterval(function(){
                if(div.offsetLeft == 400) {
                    clearInterval(div.timer);
                }
                div.style.left = div.offsetLeft + 5 + 'px';
            }, 30)
        })
    </script>
</body>

二、缓动动画

<body>
    <button>点击移动</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            clearInterval(div.timer || null);
            div.timer = setInterval(function(){
                var step = (400 - div.offsetLeft) / 10;
                if(div.offsetLeft == 400) {
                    clearInterval(div.timer);
                }
                div.style.left = div.offsetLeft + step + 'px';
            }, 30)
        })
    </script>
</body>

三、封装动画

说明：1. obj为动画对象

2. destination为到达的目标

3. callback为动画执行结束前调用的回调函数

function animate(obj, destination, callback) {
    clearInterval(obj.timer || null);
    obj.timer = setInterval(function(){
        var step = (destination - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft == destination) {
            callback && callback();
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 10)
}