Analysis of JS motion effects-perfect motion frame and js instance

Analysis of JS motion effects-perfect motion frame and js instance

This article describes the motion frame of JS motion effects. We will share this with you for your reference. The details are as follows:

As mentioned in the previous article "simultaneous motion of js motion effects", there is still a problem in our motion frame. What is the problem? Adjust the previous program

oDiv.onmouseover = function () {   //startMove(oDiv,{width:300,height:300,opacity:30});   startMove(oDiv,{width:204,height:300,opacity:30});}

When the mouse moves in, we change the width to 300 instead of 204. what changes will happen ??

As shown in the figure, when the mouse is moved in,Only when the width reaches the expected value of 204But neither height nor opacity has reached the target value (the target values are 300 and 0.3). Why ?? Is caused by the following problems:

if(objAttr == json[attr]){    clearInterval(obj.timer);    if(fn){      fn();    }}

In the if statement, the timer is cleared when objAttr is equal to the target value (that isAs long as one attribute reaches the target value, it enters the if, Clear the timer), does not judge that "All motion" has reached the target value; width from 200 to 204 will soon reach the target value, while the height and opacity are still halfway; however, since the width has reached the target value, the if statement clears the timer, width, height, and opacity. They use a timer, therefore, the height and opacity are fixed on the half track and will never reach the target value.

How can we solve this problem ???

1. InWhen entering the timer, Sets a flag var flag to detect whether all movements reach the target value.

Function startMove (obj, json, fn) {clearInterval (obj. timer); obj. timer = setInterval (function () {var flag = true; // one enters the timer to set the flag}, 30);} var flag = true; // indicates that all motion has reached the target value var flag = false; // indicates that some motion has not reached the target value

2. Then, in the statement to check whether the motion is stoppedMake judgment

If (objAttr! = Json [attr]) {// determines whether all the motion has reached the target value. // if statements are entered, at least one motion has not reached the target value. flag = false ;}

For... in. every attribute in the loop is changed (widht, height, opacity ...), if one attribute change does not reach the target value, the flag value is false.The entire for... in... loopDetermine the flag value. If it is still true, it indicates that "All motion" has reached the target value, and then the timer can be cleared.

For (attr in json) {} if (flag) {// judge the flag value clearInterval (obj. timer) again; if (fn) {fn ();}}

The timer is executed once every 30 milliseconds.var flag =trueAnd then execute the following command to determine each time.

if(objAttr != json[attr]){ ... }As long as a movement does not reach the target value, it will execute the if statement and set the flag to false. When the timer is last executed, it will find that all attributes have reached the target value, in this case, the if statement is not true, so the flag cannot be set to flase. Therefore, the last time the flag enters the timer is always true.if(flag){  ...  }And then enterif(flag){  ...  }Run.

This is perfect. Check the effect.

Complete Test code:

The Hhtm part and the css part are exactly the same as the previous one. The 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. obtain the current value (which can be the value of widht, height, opacity, etc.) var objAttr = 0; if (attr = "opacity") {objAttr = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {objAttr = parseInt (getStyle (obj, attr);} // 2. calculate the motion speed var ISpeed = (json [attr]-objAttr)/10; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); // 3. check whether 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 '; // required again. attribute name format changed to []} if (bStop) {// indicates that all motion has reached the target value clearInterval (obj. timer); if (fn) {fn () ;}}, 30) ;}</script>

Here we can separate this motion frame and save it as a js file for us to enjoy later!