animate用法 js原生_js原生复杂实现animate操作Css3属性(升级版!)

sadsadsadsadsadsadsa

#box{width:200px;height:200px;background:red;

}

/**

* [animate 动画效果(可操作CSS2和CSS3)直接书写CSS3动画效果就可直接识别]

* @param {[type]} obj [要操作的对象]

* @param {[type]} json [属性]

* @param {[type]} speed [时间]

* @param {Function} fn [回调]

* @return {[type]} [description]*/

functionanimate(obj ,json ,speed ,fn) {varstartTime= newDate();variCur= 0;variSpeed= 0;varCss3=[];vari= 0;varpx= '';

clearInterval(obj.timer);

obj.timer=setInterval(function() {variStop= true;

i++;

document.title=i;for(varnameinjson) {variTarget=parseInt(json[name].match(/([0-9])+/g,""));

iCur=parseInt(obj.style[name].match(/([0-9])+/g,""))||parseInt(css(obj ,name).match(/([0-9])+/g,""))|| 0;varpercentage=Math.min(1, (newDate-startTime)/speed);if(!inArray(name ,Css3)) {

iSpeed=( iTarget-iCur )/ 8;

iSpeed=iSpeed> 0 ?Math.ceil(iSpeed) : Math.floor(iSpeed);

iSpeed=(iCur+(iTarget-iCur)*percentage);

iValue=iSpeed+css(obj ,name).match(/([a-z])+/g,"");

}else{

}if(iCur!=iTarget&&json[name].match(/([a-z])+\((.)+\)/g,"")) {

iStop= false;

iValue=json[name].replace(/([0-9])+/, iSpeed)

}if(iCur!=iTarget) {

iStop= false;

obj.style[name]=iValue;

}

}if(iStop) {

console.log(newDate-startTime);

clearInterval(obj.timer);

fn&&fn.call(obj);

}

} ,13);

}functioninArray(b,a){for(vari= 0; i<=a.length- 1; i++) {if(a[i]==b){return true;

}return false;

};

}functioncss(obj, attr) {if(obj.currentStyle) {returnobj.currentStyle[attr];

}else{returngetComputedStyle(obj ,false)[attr];

}

}

window.οnlοad= function() {

box.οnclick= function() {

animate(box ,{'width':'400px','height':'600px'} ,1000,function() {

animate(this,{'transform':'rotate(180deg)'},1000,function() {

animate(this,{'width':'100px'},1000,function() {

animate(this,{'height':'100px'},1000,function() {

alert(1)

})

})

})

})

}

}