Eight js animation knowledge points and js animation knowledge points

Eight js animation knowledge points and js animation knowledge points

Today, I learned about js motion animation, recorded my experiences, and shared it with you.

The following are my results.

Knowledge Point 1: Speed animation.

1. First, the first step is to implement Speed Motion Animation and encapsulate a function. The knowledge used is setInterval (function (){

Copy codeThe Code is as follows:
ODiv. style. left = oDiv. offsetLeft + 10 + "px ";
}, 30 ).

For the reason why I want to use offsetLeft here, I specifically tried Baidu. the useful information I got is:

A. the similarities between offsetLeft and left indicate the left position of the child node relative to the parent node.
B. However, left can be read and written, while offsetLeft is read-only;
C. There is no unit for offsetLeft. px is not followed when the sub-node location is obtained.

I would like to extend other knowledge here. Thanks to this blogger /.

2. let the moving node stop. Here we use the if statement for verification. if offsetLeft = 0, clearInterval (timer), timer should be initialized = null in advance, assign the previous motion animation to it.

3. there is a problem here. If the motion is triggered again before the motion ends, the speed of the motion increases. Here, we only need to clearInterval (timer) before the whole motion starts.

4. set the moving and removing effects and set parameters for the motion. One is speed and the other is iTarget. We find that the speed can also be determined by the ITarget position, therefore, you only need one parameter.

Knowledge Point 2: Transparency gradient

1. Actually, it is similar to the previous one, except that the value of ITarget is transparency, and the process is to clear the timer and enable a timer to judge.

2. Define a parameter alpha = transparency. Note that the timer should be written like this:

Copy codeThe Code is as follows:
Alpha + = speed;
ODiv. style. filter = 'Alpha (opacity: '+ alpha +') '; // This is a very important method. Note that it is written in this way.
ODiv. style. opacity = alpha/100; // do not forget to divide by 100

3. The above are all in-row styles.

Knowledge Point 3: buffering

1. The larger the distance, the larger the speed. The smaller the distance, the smaller the speed. That is, the speed is related to the distance.

2. According to the above statement, the speed is redefined. The initial speed is 0, but now:

Copy codeThe Code is as follows:
Var speed = iTarget-oDiv.offsetLeft;

Redefinition of the Timer:

Copy codeThe Code is as follows:
ODiv. style. left = oDiv. offsetLeft + speed + 'px ';

At this point, we find that the speed is too high. You can do this:

Copy codeThe Code is as follows:
Var speed = (iTarget-oDiv.offsetLeft)/10;

3. in this case, a serious problem occurs. Because the minimum unit of the screen is px, the final left value is decimal instead of the target iTarget, which can be solved through judgment, here we will introduce Math. floor (), which is rounded down and Math. ceil (), which is rounded up. After defining the speed, we write as follows:

Copy codeThe Code is as follows:
Speed = speed> 0? Math. ceil (speed): Math. floor (speed );

This completely guarantees that the speed is an integer and the critical value is 0.

Knowledge Point 4: multi-object motion　　

1. Get all objects first, form an array, and then use the for Loop (How classic this method is !), Add node events in the for loop. You can use this in the function to replace the current node. for example: startMove (this, iTarget), startMove (obj, iTarget) when defining the function ).

2. When offsetWidth is used, the obj value is used.

3. when the mouse moves very fast, the width of the node fails to restore the original state, because the timer is a common timer, and the timer has been cleared since the previous node has not recovered to the original state, the solution is to add an index to each node, that is, add aDiv [I] to the for loop above. timer = null; then define obj in the function. timer replaces timer. Therefore, we need to pay attention to the possibility of sharing the timer.

4. in the motion of transparency, alpha replaces speed, but even if the timer is not shared, the motion of multiple objects may also be faulty. This is because of the common usage of alpha, which leads to the tearing of each object, the solution is to assign alpha to each node in the for loop like timer.

Conclusion: To solve conflicts, either initialize or personalize them.

Knowledge Point 5. Get Style

1. in the timer that changes the node width (move in large, remove small), if you add a border to the node, it is smaller than the target node when you move in, the removal is larger than the target node. Pay attention to width + padding + scrollbar (scroll bar) + border. The reason is that border * 2 is added for each offset (the value reduced for each timer ).

2. to solve the preceding problem, write the width in the row and use parseInt (oDiv. style. width) instead of offsetLeft, but it cannot always be written in the row. Therefore, we define a function to get the link style:

Copy codeThe Code is as follows:
Function getStyle (obj, attr ){
If (obj. currentStyle ){
Return obj. currentStyle [attr]; // IE browser
}
Else {
Return getComputerStyle (obj, false) [attr]; // other browsers
}
}

3. For font-size, only fontSize is written in js.

Knowledge Point 6: Any attribute value

1. There will be a small bug in all offset-values. Use the getStyle function. This function is often used with parseInt () and is usually saved using variables.

2. When writing style. width, you can also write style ['width'].

3. To adjust the attribute values of multiple objects, You can encapsulate the style as a parameter. In this way, the function of attributes of multiple objects includes the attribute values (obj, attr, and iTarget.

4. the above motion frame is not suitable for transparency changes, because transparency is decimal. For two reasons, the first is parseInt, and the second is attr =... + px. here we can use an if interpretation to separately process the transparency, replace parseInt with parseFloat, and remove px.

5. The computer itself has a bug, 0.07*100 is not equal to 7, so we introduce a function that is Math. round (), which is a rounding value.

Knowledge Point 7: chain movement

1. Introduce the move. js framework.

2. Input a callback function fn () and use if to determine whether fn () exists. Then, execute fn ().

Knowledge point 8: simultaneous exercise

1. If two motion functions are written to control the simultaneous motion, function coverage will occur.

2. If json is used, the json loop uses for (I in json). The parameters of the motion function are obj, json, and fn.

3. There is no iTarget value, and the value is replaced by json [attr].

This is the end of writing. I hope you will like it. I also hope it will be helpful for you to learn about js motion animation.