JavaScriptパッケージの任意の方向、任意の属性、多属性同時運動の運動関数
15321 ワード
/*
:animate( , , )
, :
animate(box,{
width:200,
height:200,
opacity:0.5,
left:200
},function(){console.log(' ');});*/
function animate(dom,attr_obj,callback){
for(var attr in attr_obj){
//
//
// attr_obj = {
// width:{
// 'current':200,
// 'target':200
// },
// height:{
// 'current':200,
// 'target':200
// },
// opacity:{
// 'current':1,
// 'target':0.5
// }
// }
if(attr === 'opacity'){
var current = parseInt(getComputedStyle(dom,false)[attr]*100);
var target = attr_obj[attr]*100;
}else if(attr.indexOf('scroll') !== -1){
var current = dom[attr];
var target = attr_obj[attr];
}else{
var current = parseInt(getComputedStyle(dom,false)[attr]);
var target = attr_obj[attr];
}
attr_obj[attr] = {
'current':current,
'target':target
}
}
// ,
clearInterval(dom.timer);
dom.timer = setInterval(function(){
for(var attr in attr_obj){
// current target,
var current = attr_obj[attr].current;
var target = attr_obj[attr].target;
//
var speed = (target - current)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//
if(Math.abs(target - current) <= Math.abs(speed)){
if(attr === 'opacity'){
dom.style[attr] = target /100;
}else if(attr.indexOf('scroll') != -1 ){
dom[attr] = target;
}else{
dom.style[attr] = target + 'px';
}
//
delete attr_obj[attr];
// , , ,
// , 。 ,
// ,
for(var o in attr_obj){
return;
}
//
clearInterval(dom.timer);
// , ,
typeof callback === 'function' ? callback() : '';
}else{
attr_obj[attr].current += speed;
if(attr === 'opacity'){
dom.style[attr] = attr_obj[attr].current/100;
}else if(attr.indexOf('scroll') != -1){
dom[attr] = attr_obj[attr].current;
}else{
dom.style[attr] = attr_obj[attr].current + 'px'
}
}
}
},20)
}
好きなのは注目してください.