js封装动画

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #javascript #css

js 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript封装一个动画函数，包括清除旧定时器、设置步长、缓动算法的实现，并在动画结束后执行回调函数。通过这个函数，开发者可以更方便地创建平滑的页面动画效果。

//封装动画函数
function animate(obj, target, callback) {   //ojb代表元素对象 target代表结束的时间  callback回调函数
    //先清除以前的定时器，只保留当前一个定时器执行
    clearInterval(obj.time);
    obj.time = setInterval(function () {
        //1.步长写在定时器里面
        //2.把我们的步长改为整数，不要出现小数的问题。
        //3.缓动算法：(目标值-现在的位置)/10
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        if (obj.offsetLeft == target) {
            clearInterval(obj.time);
            //回调函数写到定时器结束里面
            if (callback) {
                //调用函数
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 20)
}