JS Motion-Perfect motion frame

In the previous article "JS Movement-simultaneous movement" said that our motion framework still has a problem, what is the problem that? Make adjustments to the previous procedure.

Odiv.onmouseover = function () {      //startmove (odiv,{width:300,height:300,opacity:30});      Startmove (odiv,{width:204,height:300,opacity:30});}

When the mouse is moved in, we let width not become 300, but become 204, see what will change that??

as you can see from the graph, when the mouse moves in, only the width reaches the expected value 204 , while Height and the Opacity Has not reached the target value (the target value is - and the 0.3 ), which is why that?? is caused by the following problem

if (objattr = = Json[attr]) {       clearinterval (obj.timer);       if (FN) {           fn ();       }}

The If statement simply determines that the timer is cleared when the objattr equals the target value (that is, if a property reaches the target value and enters if, clears the timer), it is not judged that "all movements" have reached the target value. Width from 200 to 204 will soon reach the target value, while the height and opacity is still half way, but because the width has reached the target value, so enter the IF statement clears the timer, Width,height, Opacity they use a timer, so at this point the height and opacity on the half-track will never reach the target value.

Then how to solve that???

1. when entering the timer , set a flag-bit VAR flag, which is used to detect if all movements reach the target value

function Startmove (OBJ,JSON,FN) {            clearinterval (obj.timer);            Obj.timer = setinterval (function () {              var flag = true;//One enters timer set flag bit            },30);

var flag = true;//Indicates that all movements reach the target value

var flag = false;//Indicates that some movement does not reach the target value

2. Then make a judgment in the sentence that detects if the motion is stopped.

if (objattr! = Json[attr]) {//To determine if all the motion has reached the target value         //Enter the IF statement, indicating that at least one movement has not reached the target value         flag = false;}

for...in. Each property in the loop changes (widht,height,opacity ... ), as long as a property change does not reach the target value, the value of the flag flag is false; then the entire for...in. outside the loop judgment Flag If the value is still true on the mark "All movement" has reached the target value, this time can clear the timer

For (attr in JSON) {                    }if (flag) {//re-determines the value of flag    clearinterval (obj.timer);    if (FN) {       fn ();    

The timer executes every 30 milliseconds, each time you enter the VAR flag =true, and then execute it down

if (objattr! = json[attr]) {...} As long as there is a movement does not reach the target value, will go into the execution if statement, the flag is set to false, when the last time the timer execution, found that all the properties have reached the target value, when the IF statement is not established, there is no chance to set the flag as Flase, So the last time the timer flag is entered is true; then it satisfies the if (flag) {...} the conditions, then enter if (flag) {...} execution.

It's perfect here, look at the effect.

Complete test Code:

The hhtm section and the CSS section are exactly the same as in the previous article. JS code is as follows

<script> window.onload = function () {var odiv = document.getElementById (' Div1 ');                Odiv.onmouseover = function () {//startmove (odiv,{width:300,height:300,opacity:30});            Startmove (odiv,{width:204,height:300,opacity:30});            } odiv.onmouseout = function () {Startmove (odiv,{width:200,height:200,opacity:100}); }} function GetStyle (obj,attr) {return getcomputedstyle? getComputedStyle (Obj,false) [attr]:        OBJ.CURRENTSTYLE[ATTR];            } function Startmove (OBJ,JSON,FN) {clearinterval (Obj.timer);                Obj.timer = setinterval (function () {var bstop = true;                    For (attr in JSON) {//1. Gets the current value (can be a value of widht,height,opacity, etc.) var objattr = 0;                  if (attr = = "Opacity") {objattr = Math.Round (parsefloat (GetStyle)) obj,attr);  }else{objattr = parseint (GetStyle (obj,attr));                        }//2. Calculate the movement speed var ispeed = (Json[attr]-objattr)/10; Ispeed = ispeed>0?                    Math.ceil (ispeed): Math.floor (Ispeed); 3.                    Detects if all movements reach the target if (objattr! = Json[attr]) {bstop = false; } if (attr = = "Opacity") {Obj.style.filter = ' alpha (opacity: ' + (objattr+ispeed) + ')                        ';                    Obj.style.opacity = (objattr+ispeed)/100;                }else{obj.style[attr] = objattr+ispeed+ ' px ';//need to change the form of the property name to []}                    } if (bstop) {//indicates that all movements reach the target value clearinterval (Obj.timer);                    if (FN) {fn ();        }}},30); } </script>

Here we can put this motion framework alone, save as JS file for us to enjoy later!

JS Motion-Perfect motion frame