Javascript perfect motion framework (line-by-line code analysis makes it easy for you to exercise) _ javascript skills

This article mainly introduces the Javascript perfect motion framework and analyzes the code line by line, so that you can easily understand the motion principle. If you need a friend, you can refer to this name for your reference, with this framework, the online effect is basically achievable. In fact, the previous motion frame still has limitations, that is, it cannot let several values move one piece.

How can this problem be solved? 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(getStyle(obj, attr)) * 100);    } else {      cur = parseInt(getStyle(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 = '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 is very simple. In the past frame, you can only pass one style and one value at a time. Now, change these to a json object. I believe you will understand.

We call startMove (oDiv, {width: 200, height: 200}). If necessary, add the callback function. Let's take a look at how the code is modified.

Function startMove (obj, json, fnEnd) {var MAX = 18; // each call only has one timer to work (the existing timer is disabled when the movement starts) // when the timer is disabled or enabled, the timer of the current object has been prevented from conflict with other timers on the page, so that each timer does not interfere with clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; // assume that all values have reached for (var name in json) {var iTarget = json [name]; // target point // processing transparency. parseInt cannot be used; otherwise, it is 0. if (name = 'opacity ') {// * 100 may have an error of 0000007, So Math is used. round () is rounded to var cur = Math. round (parse Float (getStyle (obj, name) * 100);} else {var cur = parseInt (getStyle (obj, name )); // current Moving Value of cur} var speed = (iTarget-cur)/5; // The slower the number is, the slower the motion of the object./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 not equal to the target point if (cur! = ITarget) {bStop = false ;}// if (bStop) {clearInterval (obj. timer); if (fnEnd) // call {fnEnd () ;}}, 20) only when this function is passed );}

Why is there a bstop assumption?

In fact, if I call startMove (oDiv, {width: 101, height: 200}) in this way, the width is changed to 101, and the height is not reached, however, we may have disabled the current timer. When the exercise is over, a special bug may occur. Explanations:

In fact, you need to turn off the timer only when all the movements arrive. In other words, if there is no such thing, close the timer. The program defines a Boolean value, which is true at the beginning.

All values have arrived. If one value is not equal to the target point, bstop is false. After the entire loop ends, if bstop is true, all the movements are completed. In this case, the timer is disabled.

This motion frame has basically been completed, and css2 is not applicable to css3.

Summary:

Evolution of motion frame

StartMove (iTarget) motion frame
StartMove (obj, iTarget) Multiple objects
StartMove (obj, attr, iTarget) any value
StartMove (obj, attr, iTarget, fn) chained Motion
StartMove (obj, json, fn) Perfect Motion

O (∩) O Thank you ~