js封装动画

米硕

于 2021-10-12 21:08:10 发布

阅读量87

点赞数

分类专栏： js 文章标签：动画 javascript css

本文链接：https://blog.csdn.net/mishuo24/article/details/120732338

版权

js 专栏收录该内容

6 篇文章

订阅专栏

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

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

//封装动画函数
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)
}