JavaScript animation effect (i)

JavaScript animation effect (i)

We've introduced JavaScript back to the top, and today we're doing further research on JavaScript animations. In this blog post we only introduce the simple uniform motion, the simple buffer movement and the simple multi-object motion, we will also introduce the movement of any value change, chain motion, simultaneous motion, and we will simply encapsulate a motion frame and compare the JavaScript method with the jquery method.

1, the simple uniform motion

Here we introduce a demo, mouse move in, animation to the right (that is, the hidden part of the display), the mouse left, the animation left (continue to hide) the whole process is uniform. With the front back to the top effect as the basis, here is mainly about the important part, first to look at the code:

<! DOCTYPE html>
In the JavaScript section, we find that a lot of code is duplicated, so we can pass in different places with parameters, the main code is as follows:
/* *  onmouseover and onmouseout events in front of  *startmove (10,0); *startmove ( -10,-200); * The following startmove and startMove1 two functions are merged, the code is as follows: */function Startmove (speed,itarget) {clearinterval (timer); var odiv = document.getElementById (' Div1 '); timer = setinterval (function () {if (Odiv.offsetleft = = ITarget) {clearinterval (timer) ;} Else{odiv.style.left = odiv.offsetleft+speed+ ' px ';}},30)}
At this point we will still find a problem, that is, in the case of the same function, the less the better, then we have to make further changes to our previous code, because ITarget is the target value, so we consider the speed parameter is removed, the code is as follows:
Consider the less parameters, the better the principle, you can remove the speed, while the preceding onmouseover and onmouseout events should also change function Startmove (itarget) {clearinterval (timer); var Odiv = document.getElementById (' div1 '); timer = setinterval (function () {//define a speedvar speed = 0;//to determine if ( Odiv.offsetleft > ITarget) {//when Odiv.offsetleft > ITarget should be moved to the left speed =-10;} Else{speed = 10;} if (Odiv.offsetleft = = ITarget) {clearinterval (timer);} Else{odiv.style.left = odiv.offsetleft+speed+ ' px ';}},30)}
Here, our uniform motion effect is basically complete. In the demo above, we changed the left effect, so we can also change the right,width and height effects. Think: In CSS3 Animation has the effect of changing the transparency, where can we get the implementation in the previous way?
The answer is: roughly can be achieved by the above method, but there is a small problem to note, whether it is left,right or width,height they have a unit px (in the above demo, one line of code is this: ODiv.style.left = Odiv.offsetleft+speed+ ' px ', and transparency whether it is opacity or filter, they are not units, so we can write the following code:
Alpha + = Speed;odiv.style.filter = ' Alpha (opacity: ' +alpha+ ') '; oDiv.style.opacity = alpha/100;
The complete code is as follows:
<! DOCTYPE html>
Here, our speed animation is over. For more information about opacity and filter, please see here
2. Cushioning movement
Recall before returning to the top effect, in order to increase the user's experience, back to the top of the first is fast after slow. With the previous foundation, the sentence here is very good, take demo1 as an example, we can add the following code:
function Startmove (itarget) {var odiv = document.getElementById (' Div1 '); clearinterval (timer); timer = SetInterval ( function () {var speed = (itarget-odiv.offsetleft)/20;speed = speed>0? Math.ceil: Math.floor (speed);//Pay attention to the rounding problem here, otherwise the original position cannot be returned after movement//if (Speed > 0) {//speed = Math.ceil (speed);//}// Else{//speed = Math.floor (speed);//}if (ITarget = = Odiv.offsetleft) {clearinterval (timer);} Else{odiv.style.left = odiv.offsetleft+speed+ ' px ';}},30)}
In this code, the var speed = (itarget-odiv.offsetleft)/20, by controlling the divisor can control the velocity of the animation, Then we use Math.floor and Math.ceil respectively for the downward and upward rounding, if not used, then the mouse to move in and out of the desired effect (the computer in the calculation is always error). Here, the cushioning movement is also introduced almost. Let's introduce the multi-object movement.
3. Multi-Object Motion
With the foundation in front, we find it easy to see how many objects move. In multi-object motion, we separate the width change from the change in transparency
" Multi-object width change"
In the variation of multi-object width, we use unordered list to implement. Unlike the width of a single object, we use the For loop to iterate through the values we want, and the key code is as follows:
var aLi = document.getelementsbytagname (' li '); for (var i = 0; i< ali.length; i++) {//i=0ali[i].onmouseover = function () { Startmove (this,400);} Ali[i].onmouseout = function () {startmove (this,200);}}
The full code is as follows:
<! DOCTYPE html>
"Multi-object transparency Animation"
With the above example, we can easily write a multi-object transparency animation code, the code is as follows:
<! DOCTYPE html>
As with the previous timer, alpha = 30; it also needs to be written behind the For loop.
Here, the simple animation effect will be over, slowly step-by-step to modify to try there will be a new discovery ~
JavaScript animation effect (i)