The uniform Motion of JS Movement Foundation

Single attribute uniform motion

1     /**2 * Single attribute uniform motion3      */4     functionFnsingleuniformmove (ODom, sattr, ITarget, fn) {5         varispeed, icur;6Clearinterval (Odom.timer);//clear the timer before turning on the timer to avoid overlapping animations7Odom.timer = SetInterval (function(){8 9             //Calculate Current ValueTen             if(sattr = = ' opacity '){ OneIcur = Math.Round (Fngetstyle (ODom, sattr) * 100); A}Else{ -Icur =parseint (Fngetstyle (ODom, sattr)); -             } the  -             //Set Speed -             if(ITarget <icur) { -Ispeed =-10; +}Else{ -Ispeed = 10; +             } A  at             //velocity equals difference when the difference between the target point and the current value is less than the speed -             if(Math.Abs (Itarget-icur) <Math.Abs (ispeed)) { -Ispeed = ITarget-icur; -             } -  -             //Exercise stops judging in             if(ITarget = =icur) { - clearinterval (odom.timer); tofn&&fn (); +}Else{ -                 if(sattr = = ' opacity '){ theODom.style.opacity = (icur + ispeed)/100; *ODom.style.filter = ' alpha (opacity: ' + (Icur + ispeed) + ') '; $}Else{Panax NotoginsengODOM.STYLE[SATTR] = icur + ispeed + ' px '; -                 } the             } +}, 30); A};

Multi-attribute simultaneous change of uniform motion

1     /**2 * Multi-attribute Uniform motion3      */4     functionFnmultiuniformmove (ODom, JSON, FN) {5         varispeed, Icur, bstop;6Clearinterval (Odom.timer);//clear the timer before turning on the timer to avoid overlapping animations7Odom.timer = SetInterval (function(){8Bstop =true;//true before the For in loop, if one does not reach the target point, it will make him false, and finally determine whether the value is true to determine whether to turn off the timer9              for(varSattrinchJSON) {Ten                 //Calculate Current Value One                 if(sattr = = ' opacity '){ AIcur = Math.Round (Fngetstyle (ODom, sattr) * 100); -}Else{ -Icur =parseint (Fngetstyle (ODom, sattr)); the                 } -  -                 //Set Speed -                 if(Json[sattr] <icur) { +Ispeed =-10; -}Else{ +Ispeed = 10; A                 } at  -                 //velocity equals difference when the difference between the target point and the current value is less than the speed -                 if(Math.Abs (json[sattr]-icur) <Math.Abs (ispeed)) { -Ispeed = json[sattr]-icur; -                 } -  in                 //Single-Attribute motion stop judgment -                 if(json[sattr]! =icur) { toBstop =false; +                     if(sattr = = ' opacity '){ -ODom.style.opacity = (icur + ispeed)/100; theODom.style.filter = ' alpha (opacity: ' + (Icur + ispeed) + ') '; *}Else{ $ODOM.STYLE[SATTR] = icur + ispeed + ' px ';Panax Notoginseng                     } -                 } the             } +  A             //the judgment of the whole motion stop the             if(bstop) { + clearinterval (odom.timer); -fn&&fn (); $             } $}, 30); -};

Ways to get element styles

1     //gets the value of a style for an element2     functionFngetstyle (ODom, sattr) {3         if(getComputedStyle) {4             returngetComputedStyle (ODom,NULL) [sattr];//getcomputedstyle return undefined when getting custom values5}Else{6             returnODOM.CURRENTSTYLE[SATTR];//Currentstyle and GetAttribute can read the values derived from the definition (so that the value of opacity can be obtained)7         };8};

The uniform Motion of JS Movement Foundation