Eight facts about js motion animation

Today, I simply learned 1 js motion animation, recorded 1 of my own experience, and Shared it with you.

Here's what I've put together.

Speed animation.

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

　　　　oDiv.style.left=oDiv.offsetLeft+10+"px";

　　},30).

For the reason why offsetLeft is used here, I have baidu 1. The useful information I get is as follows:

a.offsetLeft and left have in common the left position of the child relative to the parent.
But while left is readable and writable, offsetLeft is read-only;
c. Also, offsetLeft has no units, so it is not followed by px when obtaining the position of child nodes.

Here under the extended 1 other knowledge, thanks to the blogger, http: / / blog. 163. com/hongshaoguoguo @ 126 / blog/static / 18046981201372885729561 /.

2. Let the moving node stop, here we use if statement to do a verification, if offsetLeft==0, clearInterval (timer), timer here should first initialize =null, and then assign the previous motion animation value to it.

3. There is a problem here. If the movement is triggered again before the end of the exercise, the speed of the exercise will accumulate.

4. Set the move-in removal effect and set parameters for the movement. One is the speed speed, and the other is the target location iTarget.

Transparency gradient

1. In fact, it is about the same as just now, except that the value of ITarget is transparency, and the process is still clearing the timer and opening another timer judge, etc.

2. Define a parameter alpha= transparency. Note that the timer should read:

　　alpha+=speed ; 

　　oDiv.style.filter='alpha(opacity:'+alpha+')';         // This is very important 1 One way. Notice it's written like this 

　　oDiv.style.opacity=alpha/100;            // And don't forget to divide 100

3. The above are inline styles.

3. Buffer movement

1. Buffer movement 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, the speed is redefined as follows: 1 started with a speed of 0, and now:

　　var speed=iTarget-oDiv.offsetLeft;

Redefine the timer:

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

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

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

3. At this point, there will be a serious problem. Since the smallest unit of the screen is px, the final left value will appear as a decimal, and iTarget, which is not the target, can be solved by judgment. After defining speed, we write:

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

So you can completely guarantee that the velocity is going to be an integer, and it's going to be zero at the threshold.

Point 4: multi-object movement

1. Get all the objects first, form an array, and then use the for loop (classic!). , add node events in the for loop, this can be used to replace the current node in the function, eg: startMove (this, iTarget), startMove (obj, iTarget) when defining the function.

2. obj is used when taking the current width offsetWidth.

3. When the mouse moves very fast, the width of the node cannot be restored to its original state, because the timer is a common timer for everyone. The last node has not been restored to its original state, and the last node has already been cleared of the timer. Then define a function that replaces timer with obj.timer. So we need to be careful about what happens to Shared timers.

4. In the transparency movement, alpha replaces speed, but even if the timer is not Shared, the movement of multiple objects will have problems. This is because alpha is common and causes objects to tear each other, and the solution is to allocate alpha to each node in the for cycle, just like timer.

Summary: conflict resolution, either initialization or personalization.

Get style

1. In the timer that changes the width of the node (move in large, remove small), if you add an border border to the node, it will be smaller than the target node when moving in, and larger than the target node when moving out. Note that width+padding+scrollbar +border, so the reason is that every time offset increases border*2- (the number decreased each time in the timer).

2. The solution to the above problem is to write width in the line, and parseInt(oDiv.style.width) instead of offsetLeft, but it cannot always be written in the line, so we define a function to get the in-chain style:

　　function getStyle(obj,attr){

　　　　if(obj.currentStyle){

　　　　　　return obj.currentStyle[attr];　　　                    //ie The browser 

　　　　}

　　　　else{

　　　　　　return getComputerStyle(obj,false)[attr];          // Other browsers 

　　　　}

　　}

3. For font-size, there is only one way to write fontSize in js.

Knowledge 6: arbitrary property values

1. All offset- will have a small bug. Use the getStyle function, which is often used with parseInt () 1 and is usually saved in variables.

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

3. For the adjustment of attribute values of multiple objects, the style can be used as a parameter to encapsulate 1, so that the function of multiple object attributes can include the three attribute values (obj,attr,iTarget).

4. The above motion framework is not suitable for transparency change, because transparency is all fractional, for two reasons, the first is parseInt, the second is attr=... +px, here we can use an if interpretation to separate the transparency, replace parseInt with parseFloat, and remove px.

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

Chain exercise

1. Introduce the move.js framework.

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

Exercise at the same time

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

2. Using the knowledge of json, the loop of json is for (i in json), and the parameters of the motion function are obj, json, fn.

3. The value iTarget is no longer there, but json[attr].

At this point, it's all over, and I hope you enjoy it. I also hope to help you learn js motion animation.