js 运动框架-轻量级

时间:2021-04-22 09:41:19

  具体代码如下:

  

function move(obj,json,sv,fnEnd){
//CSS样式值
function getStyle(obj,attr){
if(obj.currentStyle) {return obj.currentStyle[attr];}
else {return getComputedStyle(obj,false)[attr];}
}
//运动
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var isAllCompleted=true; //假设全部运动都完成了
for(attr in json){
var attrValue=0;
switch(attr){
case 'opacity':
attrValue=Math.round(parseFloat(getStyle(obj,attr))*100);break;
default:
attrValue=parseInt(getStyle(obj,attr));
}
//默认速度4
var speed=(json[attr]-attrValue)/(sv||4);
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//如果循环过程中存在尚未结束的运动,isAllCompleted为假
if(attrValue!=json[attr]) isAllCompleted=false;
switch(attr){
case 'opacity': {
obj.style.filter="alpha(opacity="+(attrValue+speed)+")";
obj.style.opacity=(attrValue+speed)/100;
}; break;
default:obj.style[attr]=attrValue+speed+'px';
}
}//for in end!
//所有循环结束后,只有当全部运动结束后(isAllCompleted=true)时才关闭定时器
if(isAllCompleted){
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30);
}

  运动框架 : move(obj,propertiesJson,speed,fnCallBack)
    obj: 运动物体
    propertiesJson: 运动属性和运动目标值的json集合,{'opacity':100}
    speed: 运动的速度,speed-value,值越小速度越大
    fnCallBack: 运动结束后的回调函数

  此框架可以实现多个参数,多个物体运动互不影响。