JavaScript animation effect (1) _javascript tips

We introduced the JavaScript back to the top effect, today, we do a further study of JavaScript animation. In this blog post we only introduce simple uniform motion, simple buffer motion and simple multi-object motion We will also introduce the motion of arbitrary value changes, chain motion, simultaneous motion, and we will also simply encapsulate a motion plugin and also compare the JavaScript method with the jquery method.

1. Simple Uniform Motion

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

<! DOCTYPE html>  

In the JavaScript section, we find that a lot of code is duplicated, and then we can go through the different places with the parameters, the main code is as follows:

* *
 Startmove (10,0), respectively, in the onmouseover and onmouseout incidents earlier;
 * Startmove ( -10,-200);
 * After the  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 same function, the less the better the parameters, then we have to make further changes to our code, because ITarget is the target value, so we consider to remove the speed parameters, the code is as follows:

Consider the less the better the principle, you can remove the speed, and the preceding onmouseover and onmouseout events should also change the
function Startmove (itarget) {
  clearinterval ( timer);
  var odiv = document.getElementById (' Div1 ');
  Timer = setinterval (function () {
    //define a speed
    var speed = 0;
    The speed is judged
    if (Odiv.offsetleft > ITarget) {
      //when Odiv.offsetleft > ITarget should move to the left
      speed = -10;
    }
    else{
      speed = ten;
    }
     
    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 change the left effect, and we can also change the right,width and height effects. Thinking: In the CSS3 animation has the effect of changing the transparency, here we can be achieved through the previous way?
Answer: The above method can be generally used to achieve, but there is a small problem worth noting, whether it is left,right or width,height they have units px (in the above demo, There is a line of code is this: ODiv.style.left = odiv.offsetleft+speed+ ' px ', and transparency whether 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 will come to an ending. For more information about opacity and filter, please see here

2. Buffer movement

Recall before back to the top effect, in order to increase the user's experience effect, back to the top is the first fast and slow. With the front of the foundation, here the sentence is very good to do, 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 (Speed): Math.floor (speed);
          Note The rounding problem here, otherwise the motion cannot return to the original position
//         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, var speed = (itarget-odiv.offsetleft)/20; controls the speed of the animation by controlling the divisor, Then we use Math.floor and Math.ceil respectively to go down and up and up, if not the whole, then the mouse to move and move out of the desired effect (the computer is always error in the calculation). Here, the buffer movement also introduced almost. Now let's introduce the motion of multiple objects.

3. Multi-Object movement

With the previous foundation, we find it easy to see the motion of multiple objects. In the motion of multiple objects, we separate the changes in width and transparency
"Multi-object width Change"
In the variation of the width of multiple objects, we use unordered lists to implement them. 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=0
  ali[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 the code for the transparency animation of multiple objects, the code is as follows:

<!
    DOCTYPE html>  

Like the timer before, alpha = 30, and it needs to be written behind the For loop.
Here, the simple animation effect will come to an ending, slowly step-by-step to modify to try there will be new discoveries.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.