Eight knowledge points of js motion animation_javascript skills

Today I simply learned js motion animation, recorded my experience and shared it with everyone.

The following are the results I compiled.

Knowledge point 1: Speed ​​animation.

1. The first step is to implement speed motion animation and encapsulate a function. The knowledge used is setInterval(function(){

Copy code The code is as follows:

　　oDiv.style.left=oDiv.offsetLeft 10 "px";
},30).

As to why offsetLeft is used here, I specifically searched it and the useful information I got is:

The similarity between a.offsetLeft and left is that they represent the left position of the child node relative to the parent node.
b. But left can be read and written, while offsetLeft is read-only;
c. And offsetLeft has no unit, and there is no px behind it when obtaining the position of the child node.

Here is some additional knowledge, thanks to this blogger, http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.

2. Stop the moving node. Here we use the if statement to do a verification. If offsetLeft==0, clearInterval (timer), the timer here should be initialized = null in advance, and then assign the previous motion animation to it.

3. There is a problem here. If the movement is triggered again before the end of the movement, the speed of the movement will be accumulated. Here, as long as clearInterval (timer) is used before the entire movement starts, it will be fine.

4. Set the move-in and removal effect, and set parameters for the movement. One is the speed, and the other is the target position iTarget. We found that the speed can also be judged by the position of ITarget, so only one parameter is needed.

Knowledge point 2: Transparency gradient

1. In fact, it is almost the same as before, except that the value of ITarget is transparency, and the process is still to clear the timer and then open a timer to judge, etc.

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

Copy code The code is as follows:

​alpha =speed；
oDiv.style.filter='alpha(opacity:' alpha ')'; //This is a very important method, please note that it is written like this
oDiv.style.opacity=alpha/100; //Be careful not to forget to divide by 100

　3. The above are all inline styles.

Knowledge Point 3: Buffering Movement

1. Buffering motion means that the greater the distance, the greater the speed, and the smaller the distance, the smaller the speed, that is, the speed is related to the distance.

2. According to the above statement, redefine the speed. The speed was 0 at the beginning, but now:

Copy code The code is as follows:

var speed=iTarget-oDiv.offsetLeft;

Redefine timer:

Copy code The code is as follows:

oDiv.style.left=oDiv.offsetLeft speed 'px';

At this point we found that the speed was too high, we can do this:

Copy code The code is as follows:

var speed=(iTarget-oDiv.offsetLeft)/10;

3. There will be a serious problem at this time. Because the minimum unit of the screen is px, there will be an iTarget whose final left value is a decimal and not the target. This can be solved through judgment. Math is introduced here. floor(), which rounds down, and Math.ceil(), which rounds up. After defining speed we write like this:

Copy code The code is as follows:

speed=speed>0?Math.ceil(speed):Math.floor(speed);

In this way, it is completely guaranteed that the speeds are all integers and are all 0 at the critical value.

Knowledge point 4: Multi-object motion　

1. First get all the objects and form an array, and then use a for loop to do it (how classic this method is!), add node events in the for loop, and use this to replace the current node in the function , eg: startMove(this, iTarget), when defining a function startMove(obj, iTarget).

2. When taking the current width offsetWidth, you must use the value of obj.

3. When the mouse moves very fast, the width of the node cannot be restored to its original state. This is because the timer is a common timer for everyone. The next node has cleared the timer before the previous node has returned to its original state. The solution is to add an index to each node, which is to add aDiv[i].timer=null; in the above for loop; and then replace timer with obj.timer in the defined function. Therefore, we should pay attention to the fact that something will happen to the shared timer.

4. In the movement of transparency, alpha replaces speed, but even if the timer is not shared, problems will arise in the movement of multiple objects. This is because alpha is shared, causing each object to tear each other apart. The solution is to use it like Assign alpha to each node in the for loop like timer.

Summary: To resolve conflicts, either initialize or personalize.

Knowledge point 5. Obtain styles

1. In the timer that changes the width of the node (large for moving in, small for removing), if you add a border to the node, it will be smaller than the target node when moving in, and larger than the target node when moving out. Pay attention to the width padding scrollbar (scroll bar) border, so the reason is that each offset will increase border*2- (the value decreased each time in the timer).

　2. The way to solve the above problem is to write width in line and use parseInt(oDiv.style.width) instead of offsetLeft. However, it cannot always be written in line, so we define a function to get the link style:

Copy code The 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, there is only one way of writing fontSize in js.

Knowledge point 6: Any attribute value

1. All offset-types will have small bugs. You need to use the getStyle function. This function is often used together with parseInt() and is usually saved in a variable.

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

3. For adjusting the attribute values ​​of multiple objects, you can encapsulate the style as a parameter, so that the multi-object attribute function includes the three attribute values ​​​​(obj, attr, iTarget).

4. The above motion frame is not suitable for transparency changes, because transparency is decimal, for two reasons, the first is parseInt, the second is attr=...px, here we can use a Use if interpretation to process transparency separately, 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 called Math.round(), which is a rounded value.

Knowledge point 7: Chain motion

　1. Introduce the move.js framework.

2. Pass in a callback function fn(), use if to judge, if there is fn(), then execute fn().

Knowledge point 8: Simultaneous movement

1. If you write two motion functions to control simultaneous motion, function coverage will occur.

　2. Use the knowledge point of json. The loop of json uses for (i in json), and the parameters of the motion function are obj, json, fn.

3. There is no iTarget value anymore, it is replaced by json[attr].

As I write this, it’s completely over. I hope you all like it. I also hope it will be helpful for everyone to learn js motion animation.