Eight knowledge points _javascript skill of JS motion animation

Today, a simple study of JS motion animation, recording their own experience, to share with you.

Here are the results I've sorted out.

Knowledge Point one: Speed animation.

1. First step to achieve speed motion animation, encapsulate a function, the knowledge used is setinterval (function () {

Copy Code code as follows:

odiv.style.left=odiv.offsetleft+10+ "px";
},30).

Why to use here to Offsetleft, I purposely Baidu a bit, I get the useful information is:

The similarities between A.offsetleft and left are the positions of child nodes relative to the parent node.
B. But left is both readable and writable, while Offsetleft is read-only;
C. and offsetleft is no unit, get the child node position when the back without PX.

Here is the extension of other knowledge, thanks to the blogger, http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.

2. Let the movement node stop, here we use if statement to do a validation, if Offsetleft==0,clearinterval (timer), here the timer should initialize =null, and then the previous motion animation assigned to it.

3. Here is a problem, if the motion is triggered again before the end of the movement, then the speed of the movement will accumulate, here, as long as the whole movement before the start, clearinterval (timer) can be.

4. Set move in the removal effect, to the motion set the parameter, one is the speed speed, one is the target position itarget, we found that the speed can also be judged by the itarget position, therefore only needs one parameter.

Knowledge Point two: transparency gradient

1. In fact, with just the same, but the value of itarget is transparent, the process or clear the timer to open a timer to judge and so on.

2. Define a parameter alpha= transparency, note that the timer should be written in this way:

Copy Code code as follows:

Alpha+=speed;
Odiv.style.filter= ' alpha (opacity: ' +alpha+ ') '; This is a very important way to note that this is written
odiv.style.opacity=alpha/100; Be careful not to forget divided by 100

3. All of these are inline styles.

Knowledge Point three: Buffer movement

1. Buffering movement is the greater the distance, the greater the speed, the smaller the distance, the smaller the speed, that is, speed and distance.

2. According to the above statement, the speed of the definition, a start rate of 0, and now:

Copy Code code as follows:

var speed=itarget-odiv.offsetleft;

To redefine the timer:

Copy Code code as follows:

odiv.style.left=odiv.offsetleft+speed+ ' px ';

At this point we found that the speed was too high to be like this:

Copy Code code as follows:

var speed= (Itarget-odiv.offsetleft)/10;

3. There is a serious problem at this point, because the smallest unit of the screen is PX, so there will be the final left value of decimal, and not the target of the itarget, can be judged to solve, here to introduce Math.floor (), which is the downward rounding, the same also Math.ceil (), This is an upward rounding. After defining the speed we write this:

Copy Code code as follows:

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

This gives you a complete guarantee that the speed is an integer and is 0 on the critical value.

Knowledge Point four: Multi-object movement　　

1. First get all the objects, form an array, and then use for loop to do (this method how classic!) To add a node event in the For loop, you can use this in place of the current node in the function, Eg:startmove (This,itarget), and Startmove (obj,itarget) When the function is defined.

2. The value of obj will be used when taking the current width offsetwidth.

3. When the mouse moves particularly fast, the width of the node failed to restore the original, this is because the timer is a common timer, the previous node has not been restored the next node has cleared the timer, the solution is to each node plus a index, is in the above for loop plus adiv[ I].timer=null, and then define the function to replace the timer with Obj.timer. From this we should pay attention to the common timer will be an accident.

4. In the movement of transparency, Alpha replaces the speed, but even if the timer is not shared, the motion of the multiple objects can be problematic because of the common cause of alpha, which causes each object to tear at each other, and the solution is to assign alpha to each node in the for loop like a timer.

Summary: Resolve conflict issues, either initialize, or personalize.

Knowledge Point five. Get style

1. In changing the width of the node (move in large, remove small) in the timer, if the node to add a border border, then in the move is smaller than the target node, the move out of the time than the target node larger. Note that the Width+padding+scrollbar (scroll bar) is +border, so the reason is that each offset increases the border*2-(the number of each reduction in the timer).

2. The solution to the above problem is to write the width in line, and use parseint (oDiv.style.width) instead of offsetleft, but not always write in the line, so we define a function to get the link style:

Copy Code code 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 this, in JS only fontsize this kind of writing.

Knowledge Point Six: arbitrary attribute values

1. All offset-will have small bugs, using the GetStyle function, which is often used with parseint () and is usually saved with a variable.

2. When writing style.width, it can also be written as style[' width '.

3. For the property value adjustment of multiple objects, you can encapsulate the style as a parameter, so the function of the multiple object attribute includes (Obj,attr,itarget) these three property values.

4. The above movement framework is not suitable for transparency changes because transparency is decimal because, for two reasons, the first is parseint, and the second is attr=...+px, where we can use an if interpretation to handle the transparency individually, Replace parseint with parsefloat, remove PX.

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

Knowledge Point seven: chain-type movement

1. Introduction of the Move.js framework.

2. Incoming a callback function fn (), with the IF, if there is FN (), then execute FN ().

Knowledge Point eight: simultaneous movement

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

2. Using the JSON knowledge point, the JSON loop is using for (I in JSON), and the arguments for the motion function are OBJ,JSON,FN.

3. There is no itarget this value, replaced by json[attr].

Written here, it is completely over, I hope you can enjoy. Also hope that you learn JS motion animation can help.