Javascript perfect motion framework-line-by-line code analysis allows you to easily understand the principle of motion, javascript line-by-line

Javascript perfect motion framework-line-by-line code analysis allows you to easily understand the principle of motion, javascript line-by-line

Once you hear this name, you will know that the online effects of this framework can basically be achieved. 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 ~