原生js多动画同时运动框架（style属性多项同时改变）

最新推荐文章于 2023-05-01 11:24:11 发布

原创最新推荐文章于 2023-05-01 11:24:11 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#框架 #javascript #多物体同时运动动画

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用原生JavaScript封装的多物体同时运动动画框架，该框架能够实现元素的width、height、opacity等属性的同时变化，提供了一种高效地控制多个动画同步进行的方法。通过startMultiMove()函数，开发者可以便捷地启动元素的多个样式属性的平滑动画效果。

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

在js中，我们经常会编写代码，实现元素变化运动，如width，height，opacity等
原生封装了运动框架，代码如下

/*
 * 实现多动画同时运动（多物体运动框架）
 *
 * 调用示例   var container = document.getElementById('container');
 *           startMultiMove(container,{width:800,height:800,opacity:100},
 *               function(){alert('123');
 *           });
 * obj -> dom对象
 * json -> style的json数组
 * fn -> 运动之后应该执行的函数
 *
 * */
function startMultiMove(obj,json,fn) {
    //清除定时器，防止鼠标重复移动在元素上的情况
    clearInterval(obj.time);
    //设置定时器
    obj.time = setInterval(function () {
        for(var attr in json){
            var flag = true;//判断是否全部都达到目标值
            var curr = 0;   //记录属性对应的值
            //获得属性对应的当前值
            if (attr == 'opacity'){
                //Math.round 四舍五入
                curr = Math.round( parseFloat(getStyle(obj,attr)*100) );
            }else{
                curr = parseInt( getStyle(obj,attr) );
            }
            //设置缓冲动画，计算动画变动频率值
            var speed = (json[attr] - curr) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (curr != json[attr]) {
                //没有全部达到目标值，设置为false；
                flag = false;
            }
            if(attr == 'opacity'){
                curr = curr + speed;
                obj.style.filter = 'alpha(opacity = '+curr+ ')';
                obj.style.opacity = curr/100;
            }else {
                curr = curr + speed;
                obj.style[attr] = curr + 'px';
            }
        }
        if(flag){
            clearInterval(obj.time);
            if(fn){//有函数则执行
                fn();
            }
        }
    }, 30);
}

说明：getStyle是原生封装的获取元素的style样式（非行间），附上链接 [如何获取元素的style样式 ]

startMultiMove()函数可以实现的功能

 1.同时改变元素的多条或一条style属性，实现物体运动
 2.改变属性后可以立即执行一个函数，用户触发其他时间