Two kinds of motion functions in JS

The latest study of a new motion function, unlike the original learning, the first movement is based on the speed of movement to complete the movement, the second is based on the movement of time to complete the movement, and the previous functions have been some compatible processing, listed here to see:

The first kind of animate1

1function Animate1 (OBJ,DATA,RATE,FN) {//Motion object, motion data, [motion speed],[callback function]2//Traversal Get style properties3Forvar keyInchData) {4//Privatization of keys via closures5 (function(k) {6/*7Get style wide high will have the unit PX needs to be disposed of,8If you use parseint, it becomes 0 when the incoming opacity is a decimal, so use parsefloat9*/10var cur = parsefloat ((Obj.currentstyle | | | getComputedStyle (OBJ,Null)) [K]);1112//Handling of special values13if (k = = "opacity")){14//Transparency current and target values are magnified 100 times times to prevent decimals from being shedCur *= 100;DATA[K] *= 100;17}1819//The current value is equal to the target value, and returns directly20if (cur = = Data[k]) {Return; }21st22//Define timers by their own name to solve the problem of eliminating other motion timers by sharing a timer with each motionClearinterval (obj[k + ' timer ')]);24obj[k+ ' Timer ' = SetInterval (function(){2627//Current + = (target-current) * Ratio ratio does not pass the default 0.2Cur + = (data[k]-cur) * (Rate | | 0.2);2930if (math.round (cur) = =Data[k]) {31//If the target value is reached to clear the timer, synchronize the dataClearinterval (obj[k+ ' timer ']);Cur=DATA[K];3435//Callback, assign the timer to 0, traverse the value of each timer to add, if all timers add up to 0, indicating that the motion is complete, execute the callback functionObj[k + "Timer"] = 0;37var bl = 0;38Forvar keyInchData) {Obj[key BL + + + "Timer"];40}41if (bl = = 0){42//Determining whether to pass in a callback functionFN &&Fn.call (obj);44}45}4647//Judging special values when working with data48if (k = = "opacity")) {49 //opacity has compatibility issues, IE8 the following use Filter:alpha (opacity:100) 50 obj.style.opacity = cur/ 100; Wuyi Obj.style.filter = "Alpha (opacity=" + cur + ")" ; }else{53 obj.style[k] = Cur + "px" ; }55},30) 56 }) (key); 57 }58}      

The second kind of Animate2

function Animate2 (OBJ,DATA,TIME,FN) {//Motion object, motion data, [motion time],[callback function]//Save initial and change valuesvar start ={};var dis ={};Forvar nameInchData) {//Gets the style, saved in JSON based on the property name, {width:200,height:200} Start[name] = parsefloat ((Obj.currentstyle | | getcomputedstyle (OBJ,Null)) [name]);//Change value = target value-Initial value----> {width:500,height:300} dis[name] = Json[name]-Start[name]; }//30 is the timer frequency depending on the time it takes to get the number of movementsvar count = Math.Round ((Time | | 700)/30);//Record the number of moves alreadyvar n = 0;//Binds the timer to the object, if a different object call does not clear the previous motionClearinterval (Obj.timer); Obj.timer = SetInterval (function() {n++;Forvar nameInchData) {//Location: Starting point + distance/frequency *nvar cur = start[name] + dis[name]/count * n; // to judge a particular attribute if (name = =" Opacity " cur; obj.style.filter = "Alpha (opacity:" +cur*100 + ")" ;} else {Obj.style[name] = cur + "px" ; }} // If the number of movements and the total number of times is equal, complete the motion, clear the timer, execute the callback function if (n == Fn.call (obj); }},30}              /span>    

Summarize:

　　The time of the animate1 is inconsistent, and the Animate2 is completed at the same time,

Therefore, when invoking the callback function, animate1 needs to determine that all the motions in the object have been completed, and that the Animate2 can only reach the number of motions.

Two motion functions can solve the normal animation effect, and can not say which is certainly better, and there are areas of improvement, after learning to continue to improve

Two kinds of motion functions in JS