封装多参数的缓冲动画（可以传多个需要进行动画的类型并且还可以调用一个回调函数）

四月四日梦

于 2018-10-28 23:26:27 发布

阅读量232

点赞数

分类专栏：代码库

代码库专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用定时器优化JavaScript动画效果的方法。通过遍历属性和值，分别处理动画属性，实现平滑过渡。文章详细解释了如何计算步长、调整步长并更新元素样式，确保动画精确到达目标位置。最后，介绍了如何在动画完成时调用回调函数。

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

//参数变为3个
function animate(ele,json,fn){
    //先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        //开闭原则
        var bool = true;
        //遍历属性和值，分别单独处理json
        //attr == k(键)    target == json[k](值)
        for(var k in json){
            //四部
            var leader = parseInt(getStyle(ele,k)) || 0;
            //1.获取步长
            var step = (json[k] - leader)/10;
            //2.二次加工步长
            step = step>0?Math.ceil(step):Math.floor(step);
            leader = leader + step;
            //3.赋值
            ele.style[k] = leader + "px";
            //4.清除定时器
            //判断: 目标值和当前值的差大于步长，就不能跳出循环
            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
            if(json[k] !== leader){
                bool = false;
            }
        }
        console.log(1);
        //只有所有的属性都到了指定位置，bool值才不会变成false；
        if(bool){
            clearInterval(ele.timer);
            //所有程序执行完毕了，现在可以执行回调函数了
            //只有传递了回调函数，才能执行
            if(fn){
                fn();
            }
        }
    },15);
}