JS Motion Animation

Today simple to learn the JS motion animation, and then this thank Mu lesson nets this teacher http://www.imooc.com/view/167, speak very good.

Here are the results I've compiled.

Knowledge points One: Speed animation.

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

odiv.style.left=odiv.offsetleft+10+ "px";

},30).

For here why use Offsetleft, I deliberately Baidu a bit, http://www.cnblogs.com/woshilee/, according to this blogger I get the useful information is:

A.offsetleft and left are identical in that they represent a child node's position relative to the parent node.

B. But left is readable and can be written, and Offsetleft is read-only;

C. and offsetleft is no unit, get the sub-node position when the back without PX.

　　here is the extension of other knowledge , thank the blogger, Http://blog.163.com/[email protected]/blog/static/18046981201372885729561/.

2. Let the movement of the node stop, here we use the IF statement to do a validation, if Offsetleft==0,clearinterval (timer), here the timer should be initialized in advance =null, and then assign the previous motion animation to it.

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

4. Set the move to remove effect, to set the parameters of the motion, one is speed, one is the target location itarget, we find that the speed can be determined by the position of ITarget, so only one parameter can be.

　Knowledge Point two: transparency gradient

　　1. In fact, with just the same, just itarget value for transparency, the process is to clear the timer and then open a timer judgment and so on.

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

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; Take care not to forget to divide by 100

3. The above are in-line style.

　　Knowledge Point three: cushioning movement

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

2. According to the above, the speed is redefined, starting at a speed of 0, and now:

var speed=itarget-odiv.offsetleft;

To redefine the timer:

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

At this point we find the speed is too high, so we can:

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

3. There will be a serious problem, because the smallest unit of the screen is PX, so the final left value is a decimal, but not the target of the itarget, can be resolved by judgement, here to introduce Math.floor (), which is downward rounding, as well as Math.ceil (), This is rounding up. After defining speed we write like this:

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

This ensures that the speed is all integers and is 0 on the critical value.

　　Knowledge points Four: Multi-object Motion

　　1. Get all the objects first, form an array, and then use the For loop (how classic this method is!). ), add a node event to the For loop, and in the function you can use this instead of the current node, Eg:startmove (This,itarget), to define the function Startmove (obj,itarget).

2. Use the value of obj when taking the current width offsetwidth.

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

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

Summary: Resolve conflict issues, either initialized or personalized.

Knowledge Point five. Get style

1. In the timer that changes the width of the node (moving into a large, removed small), if a border border is added to the node, it is smaller than the target node when it is moved, and is larger than the target node. Note that the Width+padding+scrollbar (scroll bar) is +border, so the reason is that each offset will increase the border*2-(the number of each decrease in the timer).

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

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 wording.

　　Knowledge Point Six: any attribute value

1. All offset-will have a small bug, to use the GetStyle function, this function is often used with parseint (), and is usually saved with a variable.

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

3. For multi-object property value adjustment, the style can be encapsulated as a parameter, so that the function of the multi-object attribute includes (Obj,attr,itarget) the three attribute values.

4. The above-mentioned framework is not suitable for changes in transparency because transparency is fractional, for two reasons, the first is parseint, and the second is attr=...+px, where we can use an if interpretation to treat transparency separately, Replace the parseint with parsefloat and remove the 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 rounded value.

　　Knowledge Point seven: Chain movement

1. Introduction of the Move.js framework.

2. Pass in a callback function fn (), using if to determine 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 JSON, this knowledge point, the JSON loop is used for (I in JSON), the parameters of the motion function is OBJ,JSON,FN.

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

JS Motion Animation