Javascript Perfect Motion Framework--line by row analysis code, so you can easily understand the principle of motion

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.

 function getStyle(obj, name) {    if(Obj.currentstyle) {returnObj.currentstyle[name]; }Else{returngetComputedStyle (obj,NULL) [name]; }} function startmove(obj, attr, ITarget) {Clearinterval (Obj.time); Obj.time = SetInterval ( function() {        varCur =0;if(attr = =' opacity ') {cur =Math. Round (parsefloat(GetStyle (obj, attr)) * -); }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)/ -; }Else{Obj.style[attr] = cur + speed +' px '; }        }    }, -);}

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.

 function startmove(obj, JSON, fnend){    varmax= -;//Each call has only one timer at work (turns off the existing timer when the movement starts)    //And turn 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;//Assume: All values are already there.         for(varNameinchJSON) {varItarget=json[name];//Target point            //Handling transparency, cannot use parseint otherwise it will be 0.            if(name==' opacity ')            {//*100 will have an error of 0000007 or so will be rounded with math.round ()                varCur=Math. Round (parsefloat(GetStyle (obj, name)) * -); }Else{varCur=parseint(GetStyle (obj, name));//cur The current moving value}varSpeed= (itarget-cur)/5;//The speed of the movement of the object the slower the number is, the more slowly/5: Custom numberSpeed=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)/ -;//FF Chrome}Else{obj.style[name]=cur+speed+' px '; }//A value not equal to the target point            if(Cur!=itarget) {bstop=false; }        }//Both reach the target point        if(bstop) {clearinterval (Obj.timer);if(Fnend)//Only pass this function to call{fnend (); }        }    }, -);}

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

O (∩_∩) o Thank you ~

Javascript Perfect Motion Framework-progressive parsing code to make it easy to understand the mechanics of motion