Javascript Perfect Motion Frame (analysis code by line, let you relaxed the principle of motion) _javascript skills

Everybody listens to this name to know, has this set of frames the net effect basically can realize. In fact, the previous frame of motion is still limited, that is, can not let several values a piece of motion.

So how do you solve this problem? Let's take a look at the previous motion frame.

function GetStyle (obj, name) {
  if (obj.currentstyle) {return
    obj.currentstyle[name];
  } else {
    return getComputedStyle (obj, null) [name];
  }
}


function Startmove (obj, attr, itarget) {
  clearinterval (obj.time);
  Obj.time = setinterval (function () {
    var cur = 0;

    if (attr = = ' opacity ') {
      cur = math.round (parsefloat (obj, GetStyle));
    } else {
      attr = cur (g Etstyle (obj, attr));

    var speed = (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 = ' A Lpha (opacity= ' + cur + speed + ') ';
        Obj.style.opacity = (cur + speed)/MB
      else {
        Obj.style[attr] = cur + speed + ' px ';}}}

How to modify it? In fact, in the past frame, you can only pass one style, and one value at a time. So now change these to a JSON object. I believe everyone will understand.

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

function Startmove (obj, JSON, fnend) {var max=18; 
  Each call will only have a timer on the job (turn off the timer at the beginning of the movement)//and turn off or open the timer of the current object, has prevented the conflict with other timers on the page, so that each timer does not interfere clearinterval (Obj.timer);  Obj.timer=setinterval (function () {var bstop=true;//assumption: All values are already in the for (var name in JSON) {var Itarget=json[name]; Target point//process transparency, cannot use parseint otherwise it will be 0 if (name== ' opacity ') {//*100 will have error 000 
      0007 or something, so use Math.Round () to round up the Var cur=math.round (parsefloat (GetStyle obj, name) *100); else {var cur=parseint (GetStyle (obj, name);//cur value currently moved} var speed= (itarget -cur)/5; The slower the number of motion of the object the smaller the more slowly/5: 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) + ') ';//ie obj.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)//Only This function is passed to invoke {fnend ();
}}, 20); }

Why is there a bstop hypothesis?

In fact, if I call Startmove (odiv,{width:101,height:200}) like this; The width to 101 has been completed and the altitude is not there, but we may have closed the current timer. When the exercise is over, a special case of bugs will appear. Explain:

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

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

So the movement framework has been basically completed, applicable css2 is not suitable for CSS3.

Summarize:

The evolution process of the motion frame

Startmove (ITarget) motion frame
Startmove (obj,itarget) Multiple objects
Startmove (obj,attr,itarget) arbitrary value
Startmove (OBJ,ATTR,ITARGET,FN) chain type movement
Startmove (OBJ,JSON,FN) Perfect sport

O (∩_∩) o Thank you ~