A step-by-step tour of JavaScript's perfect motion frame

The realization of motion frame

Movement, in fact, in a period of time to change the left, right, width, height, opactiy value, to reach the destination after the stop.  

now follow the steps below to carry out the package of our motion frame: uniform velocity.   Buffer movement.   Multi-Object movement.   Any change in value.   Chain type movement.   Movement at the same time.   (i) Motion speed animation basic thinking: How to let the div move? as follows: Set element as absolute positioning, only after absolute positioning, left,top equivalent is effective.   The use of the timer (dynamically changing the value), where the SetInterval () is used to execute the code at specified intervals.   Timer setinterval (function, interaction time (milliseconds)): At execution time, code is executed at the specified time after the page is loaded.   Cancels the timer clearinterval (function) method to cancel the interaction time set by SetInterval (). Get the current location, size, and so on.   Offsetleft (the current element is relative to the parent element position). Velocity-the speed of the object movement the timer interval changes the size of the value according to the above information we can begin to encapsulate the motion frame to create a changed div.

1. /**
2. * Motion Frame--Move Up
3. * @param {HtmlElement} element to move the node
4. */
5. var timer = null;
6. function Startmove (Element) {
7. Timer = setinterval (function () {//Timer
8. Element.style.left = element.offsetleft + 5 + "px";
9. }, 30);
10. }

you are not wrong, it is so simple. But wait, what? Why won't you stop?   WTF? That's because we don't have sports to terminate the condition. Well, it's still easier. Directly in the timer inside, judge to reach the target value, clear the timer on the line pull!

1. /** 
2.  *  Motion Frame-motion termination  
3.  *  @param  {HTMLElement} element  moving node  
4.  *  @param  {number}      iTarget  movement termination conditions.  
5.  */ 
6.  var timer = null; 
7. function startmove (element, itarget)  { 
8.     timer =  setinterval (function  ()  { 
9.          element.style.left = element.offsetLeft + 5 +  "px";  
10.          if  (element.offsetleft === itarget)  {//stop condition  
11.              Clearinterval (timer);  
12.         } 
13.     },& NBSP;30);  
14. } 

So is it done?  It's OK now? No   There are also some bugs to deal with. the bug in the motion speed to some value can not stop the arrival of the position and then click on the motion repeated click speed can not be changed resolution of the bug speed to some values will not stop ( This bug is resolved later, naturally resolved during evolution) to move and stop (If/else) when starting a motion, close an existing timer and save the speed with a variable

1. /** 
2.  *  Motion Framework-Solution bug 
3.  */ 
4. var timer = null; 
5. function  Startmove (Element, itarget)  { 
6.     clearinterval (timer); Close existing timer  
7.     timer = setinterval (function  ()   { 
8.         var ispeed = 5;//saves the speed with a variable  
9.         //Move and Stop (If/else)  
10.          if  (Element.offsetleft === itarget)  {//end motion  
11.             clearinterval (timer);  
12.         } ELSE&NBsp { 
13.             element.style.left  = element.offsetLeft + iSpeed +  "px";  
14.          } 
15.     }, 30);  
16. } 

Such a simple frame of motion is done. But wait a second. Just go right? Don't worry, we're not defining speed as a variable? Just have to do some processing on it!   var ispeed = 5;

1. To determine the distance from the target position, to achieve automatic change speed or positive
2. var ispeed = 0;
3. if (Element.offsetleft < ITarget) {
4. Ispeed = 5;
5. } else {
6. Ispeed =-5;
7. }

Transparency Animation stores current transparency with variable alpha.   Change the above element.offsetleft to variable alpha. The motion and stop conditions section are changed. As follows:

1. Transparency Browser Compatibility implementation
2. if (alpha = = ITarget) {
3. Clearinterval (time);
4. } else {
5. Alpha + speed;
6. Element.style.filter = ' alpha (opacity: ' + alpha + ') '; Compatible IE
7. Element.style.opacity = alpha/100;//Standard
8. }

(ii) Buffering animation

think: What is the buffer animation? Should have the following: Gradually slow, the last stop distance the greater the speed of the speed determined by the distance = (target-current value)/scaling factor Bug: Speed rounding (using the math method), otherwise it will flash upward rounding. Math.ceil (ispeed) is rounded down. Math.floor (ispeed) or the speed of the article:

1. /**&NBSP;
2.  *  Motion Frame-buffer animation  
3.  */ 
4. function startmove (element, itarget)  { 
6.     timer =  SetInterval (function  ()  { 
7.     //must be placed in the timer because the speed is changing dynamically  
8.         var iSpeed =  (itarget -  element.offsetleft)  / 10; //(target-current value)/scaling factor = speed  
9.          ispeed = ispeed > 0 ? math.ceil (ISpeed)  : math.floor (ispeed);  //speed rounding  
10.         if   (Element.offsetleft === itarget)  {//End motion  
11.  &nbsP;          clearinterval (timer);  
12.          } else { 
13.              element.style.left = element.offsetLeft +  ispeed +  "px";  
14.         } 
15.     }, 30);  
16. } 

Do this, (speed to some value will not be able to stop) the bug is automatically resolved! Example: Buffer menu follow page scrolling sidebar online Demo: Codepen potential problem target value is not an integer

(iii) Multi-object movement

thinking: How to achieve the movement of multiple objects? Single timer, there are problems.   Each div a timer timer acts as an object's property directly using Element.timer to turn the timer into an attribute on the object. Transfer of parameters: Object/target value is simpler the above frame is changed as follows: Timer--&gt;element.timer it's all right!

(iv) changes in arbitrary values

cough. Let's add a 1px border to the Div. boder:1px Solid #000 Then try the following code

1. SetInterval (function () {
2. ODiv.style.width = odiv.offsetwidth-1 + "px";
3. }, 30)

Well, something magical has happened! What Do I not set the width in the minus? How the NI increased!   No, Big Brother.   What has gone wrong?   Look for information together, see the document, the original offset this series of properties will exist, by other attributes interfere with the problem.   Well, since it can't be used, then we'll just have to do the change of any value. First step: Get the actual style &nbsp; Use offsetleft ... When you get a style, a bug occurs when you set a border, padding, and so on to change the properties of the element's width height. &nbsp; Find Element.currentstyle (attr) to get the properties after the calculation. &nbsp; But because of compatibility issues, you need to encapsulate the GetStyle function. (Evil IE) &nbsp; of course with CSS Box-sizing property set to Border-box can achieve the same effect? (self-considered, not validated). &nbsp;

1. /**&NBSP;
2.  *  get actual style function  
3.  *  @param    {HTMLElement}   element   HTML node for the style to look for  
4.  *  @param    {String]} attr  style properties found in Objects  
5.  *  @returns  {String}  acquired property  
6.  */ 
7. function  getstyle (element, attr)  { 
8.     //ie writing  
9.     if  (Element.currentstyle)  { 
10.          return element.currentstyle[attr]; 
11.      //Standard  
12.     } else { 
13.          return getcomputedstyle (Element, false) [attr]; 
14.     } 
15. }&NBSP;

Step Two: Transform the original function add parameters, attr represent the value of the property that needs to be changed.   Change Element.offsetleft to GetStyle (element, attr).   Note that getstyle (element, attr) cannot be used directly because it gets the string, example: 10px.   Variable icurrent use parseint () to convert a style to a number.   Element.style.left for Element.style[attr].

2. /**
4. * Arbitrary value change of motion frame
6. * @param {HtmlElement} Element motion Object
8. * @param {string} attr properties that need to be changed.
10. * @param {Number} ITarget target value
12. */
14. function Startmove (element, attr, ITarget) {
16. Clearinterval (Element.timer);
18. Element.timer = setinterval (function () {
20. Because the speed has to be changed dynamically, it must be placed in the timer.
22. var icurrent=0;
24. Icurrent = parseint (GetStyle (element, attr))//Actual style size
26. var ispeed = (itarget-icurrent)/10; (target value-current value)/scaling factor = speed
28. Ispeed = ispeed > 0? Math.ceil (ispeed): Math.floor (Ispeed); Speed rounding
30. if (icurrent = = ITarget) {//End Motion
32. Clearinterval (Element.timer);
34. } else {
36. ELEMENT.STYLE[ATTR] = icurrent + ispeed + "px";
38. }
40. }, 30);
42. }

give it a try, is it OK? Do you remember the transparency changes we wrote above? Try again true or not, (nonsense, you have seen the transparency of "PX" unit?) --supercilious eyes) Third step: transparency compatibility processingThinking: Do you need to modify those attributes?   Determine if attr is a transparency property opacity.   For speed processing. For transparency, you need * 100 because the transparency you get is decimal, and you need to round the decimal number to an integer because the computer stores floating point numbers.   Use: Math.Round (parsefloat (GetStyle (element, attr)) * 100).   Otherwise, continue using the default speed.   Make changes to the result output section.   Judgment is the transparency property, use the transparency method otherwise, use the default output format.

2. /**
4. * Motion Frame-compatible transparency
6. * @param {HtmlElement} Element motion Object
8. * @param {string} attr properties that need to be changed.
10. * @param {Number} ITarget target value
12. */
14. function Startmove (element, attr, ITarget) {
16. Clearinterval (Element.timer);
18. Element.timer = setinterval (function () {
20. Because the speed has to be changed dynamically, it must be placed in the timer.
22. var icurrent = 0;
24. if (attr = = "opacity") {//is executed for transparency.
26. Icurrent = Math.Round (parsefloat (GetStyle (element, attr)) * 100);
28. } else {//default
30. Icurrent = parseint (GetStyle (element, attr)); Actual style size
32. }
34. var ispeed = (itarget-icurrent)/10; (target value-current value)/scaling factor = speed
36. Ispeed = ispeed > 0? Math.ceil (ispeed): Math.floor (Ispeed); Speed rounding
38. if (icurrent = = ITarget) {//End Motion
40. Clearinterval (Element.timer);
42. } else {
44. if (attr = = "opacity") {//For transparency, perform
46. Element.style.filter = "Alpha (opacity:" + (Icurrent + ispeed) + ")"; Ie
48. Element.style.opacity = (icurrent + ispeed)/100; Standard
50. } else {//default
52. ELEMENT.STYLE[ATTR] = icurrent + ispeed + "px";
54. }
56. }
58. }, 30);
60. }

here, the movement framework is basically complete. But we're in pursuit of perfection, aren't we?


continue to evolve!

(v) Chain-type animation

chain Animation: As the name suggests, is to start the next movement when the movement stops.   How to achieve it?   Use the callback function: When the motion stops, the execution function adds the Func parameter (the callback function).   Icurrent = = ITarget when the current attribute arrives at the destination, to determine if there is a callback function, and to execute it.     if (icurrent = = ITarget) {//End movement Clearinterval (Element.timer); if (func) {func ();//callback function}} good, the chain animation completes! The perfect distance is still one step away!

(vi) Simultaneous movement

Thinking: How to achieve simultaneous movement?   Use JSON to pass multiple values using a for in loop, traversing the property, and the value. Timer problem! (Motion stopped early) sets the variable outside the loop, suppose all the values have reached the destination value is true in the loop to detect whether to reach the target value, if no value is not yet, false at the end of the loop, detect whether all the target values are reached. Yes then clear Timer implementation: Delete attr and ITarget two parameter, change to JSON when the function starts, set a tag var flag = true;   Let's say all the movements arrive at the end. In the timer, use for in, traverse the properties and targets, rewrite the original attr and ITarget, modify the motion termination condition for the properties and values of the JSON, and flag true only if the actual property value of each item is icurrent equal to the target value json[attr].   Clear the timer to determine if the callback.   Otherwise, continue executing the code until all the property values are equal to the target value. Perfect Motion Frame

2. /**
4. * Get the actual style function
6. * @param {htmlelement} element HTML node for the style to look for
8. * @param {String]} attr The style properties found in the object
10. * @returns the properties obtained by {String}
12. */
14. function GetStyle (element, attr) {
16. IE notation
18. if (Element.currentstyle) {
20. return element.currentstyle[attr];
22. Standard
24. } else {
26. return getComputedStyle (element, false) [attr];
28. }
30. }
32. /**
34. * Perfect Motion Frame
36. * @param {HtmlElement} Element motion Object
38. * @param {JSON} JSON attribute: Target value
40. * @property {String} attr property value
42. * @config {Number} target destination value
44. * @param {function} func optional, callback function, chain animation.
46. */
48. function Startmove (element, JSON, func) {
50. var flag = true; Let's say all the movements arrive at the end.
52. Clearinterval (Element.timer);
54. Element.timer = setinterval (function () {
56. for (Var attr in JSON) {
58. 1. Take the current property value.
60. var icurrent = 0;
62. if (attr = = "opacity") {//is executed for transparency.
64. Icurrent = Math.Round (parsefloat (GetStyle (element, attr)) * 100);
66. } else {//default
68. Icurrent = parseint (GetStyle (element, attr)); Actual style size
70. }
72. 2. Calculate the movement speed, the animation buffering effect
74. var ispeed = (json[attr]-icurrent)/10; (target value-current value)/scaling factor = speed
76. Ispeed = ispeed > 0? Math.ceil (ispeed): Math.floor (Ispeed); Speed rounding
80. 3. Execute code when the target value is not reached
82. if (icurrent!= json[attr]) {
84. Flag = false; Termination condition
86. if (attr = = "opacity") {//For transparency, perform
88. Element.style.filter = "Alpha (opacity:" + (Icurrent + ispeed) + ")"; Ie
90. Element.style.opacity = (icurrent + ispeed)/100; Standard
92. } else {//default
94. ELEMENT.STYLE[ATTR] = icurrent + ispeed + "px";
96. }
98. } else {
100. Flag = true;
102. }
104. 4. Motion terminated, whether callback
106. if (flag) {
108. Clearinterval (Element.timer);
110. if (func) {
112. Func ();
114. }
116. }
118. }
120. }, 30);
122. }
Summary of

motion frameMotion frame Evolution Process Framework Change startmove (Element) movement Startmove (Element,itarg      ET) uniform--&gt; buffer--&gt; Startmove (ELEMENT,ATTR,ITARGRT) arbitrary value startmove (Element,attr,itargrt,func) Chain Motion Startmove (ELEMENT,JSON,FUNC) multi-value (simultaneous)--&gt; Perfect motion frame