Javascript Perfect Motion Framework--line by row analysis code, so you can easily understand the principle of movement (GO)

Original: http://www.cnblogs.com/IcemanZB/p/4195196.html

As soon as we hear the name, we can see that the effect of this framework on the Internet is basically achievable. In fact, the previous frame of motion has its limitations, that is, it is impossible to allow several values to move.

How can we solve this problem? Let's take a look at the previous motion frame.

functionGetStyle (obj, name) {if(obj.currentstyle) {returnObj.currentstyle[name]; } Else {        returngetComputedStyle (obj,NULL) [name]; }}functionstartmove (obj, attr, itarget) {clearinterval (obj.time); Obj.time= SetInterval (function() {        varCur = 0; if(attr = = ' opacity ') {cur= Math.Round (parsefloat (GetStyle (obj, attr)) * 100); } Else{cur=parseint (GetStyle (obj, attr)); }        varSpeed = (itarget-cur)/6; speed= Speed > 0?Math.ceil (Speed): Math.floor (speed); if(cur = =itarget)        {clearinterval (obj.time); } Else {            if(attr = = ' opacity ') {Obj.style.filter= ' Alpha (opacity= ' + cur + speed + ') '; Obj.style.opacity= (cur + speed)/100; } Else{obj.style[attr]= cur + speed + ' px '; }        }    }, 30);}

How to modify it? In fact, it's very simple, in the past, you can only pass one style, and one value at a time. Now change this to a JSON object. I believe everyone will understand.

The time we call is Startmove (odiv,{width:200,height:200}); If necessary, add a callback function. So let's look at how the code is modified.

functionstartmove (obj, JSON, fnend) {varMax=18; //only one timer is at work per call (turns off an existing timer when you start the movement)    //and turns off or on is the current object's timer, has prevented the conflict with other timers on the page, so that each timer does not interfere with each otherclearinterval (Obj.timer); Obj.timer=setinterval (function (){                varbstop=true;//Suppose: All the values are already there.                 for(varNameinchJSON) {            varItarget=json[name];//Target Point                        //handle transparency, can't use parseint, or it's 0.                        if(name== ' opacity ')            {                                //*100 will have an error of 0000007 or so to be rounded with math.round ()                varCur=math.round (parsefloat (GetStyle (obj, name)) *100); }            Else            {                varCur=parseint (GetStyle (obj, name));//cur The current moving value            }                        varSpeed= (itarget-cur)/5; The speed at which the object moves, the slower the number, the more slowly/5: The custom number Speed=speed>0?Math.ceil (Speed): Math.floor (speed); if(Math.Abs (speed) >max) speed=speed>0? max:-MAX; if(name== ' opacity ') {Obj.style.filter= ' Alpha (opacity: ' + (cur+speed) + ') ';//IEobj.style.opacity= (cur+speed)/100; FF Chrome            }            Else{Obj.style[name]=cur+speed+ ' px '; }                        //a value is not equal to the target point            if(cur!=itarget) {bstop=false; }        }                //all reached the target point.        if(bstop) {clearinterval (Obj.timer); if(Fnend)//the only way to invoke this function is to pass it.{fnend (); }        }    }, 20);}

Why is there a bstop hypothesis?

In fact if I do call Startmove (odiv,{width:101,height:200}); The width to 101 has finished moving and the height has not reached, but we may have closed the current timer. The movement is over, and a special case bug will appear. Explain:

In fact, it takes all the movement to turn off the timer, and on the other hand, if it's not there, shut it down. On the program is to define a Boolean value, starting with true, assuming that

All values have arrived, and if there is a value that is not equal to the target point, Bstop is false. At the end of the cycle, the bstop is ture to show that all the movement is complete and the timer is turned off at this time.

Then the framework of the movement has been basically completed, the application of CSS2 is not suitable for CSS3.

Summarize:

The evolutionary process of the motion frame

Startmove (ITarget) motion frame

Startmove (Obj,itarget) Multi-Object

Startmove (obj,attr,itarget) arbitrary value

Startmove (OBJ,ATTR,ITARGET,FN) chain-type movement

Startmove (OBJ,JSON,FN) Perfect sport

Javascript Perfect Motion Framework--line by row analysis code, so you can easily understand the principle of movement (GO)