Animation in ES6

In JavaScript, the animation feature is used to manage the aspect that the CSS (Cascading Style Sheet) can’t. JavaScript provides various new elements that help us to construct complicated animation such as Fireworks, Roll-in and Roll-out, Fade effects. We can easily shift the DOM (Document Object Model) elements like <div>, <img/> and many others.

We can create the animation with the help of the following two methods in ES6.

  • With the help of requestAnimationFrame() method: This method executes the function if the screen is ready for the next iteration. It accepts the single line function. We can create animated effects when we invoke this function in a repeated way. The process of creating animation is done frame by frame. The browser invokes the frames.
  • With the help of setInterval() method: This method is used to accept two arguments in the form of an integer and a function. We can also terminate this method with the help of clearInterval() method.

Now, we will discuss each method in detail.

requestAnimationFrame() method

The requestAnimationFrame() method is easy to establish but complicated to terminate. It is used to create gentle animation. We can create the loops and timings required to set up manually. This method cannot be used with some specific intervals. This method contains the loop at 60fps (frames per second) to create a gentle and smooth animation. We cannot execute it in the background.

Here, we have an illustration of the same.

Example1

<html>  

   <head>  

      <script type = “text/javascript”>  

            var image = null;  

            function init(){   

               image = document.getElementById(‘myimage’); 

               image.style.position = ‘relative’;      

               image.style.left = ’50px’;    

            }      

            function moveRight(){   

               img.style.left = parseInt( 

               img.style.left) + 100 + ‘px’;   

            }   

            window.onload = init;   

      </script>  

   </head>  

   <body>  

      <form>  

         <image id = “myimage” src = “train1.png” />  

         <center> 

            <p>Click on the below button to move the image left</p>  

         <input type = “button” value = “Click Me” onclick = “moveLeft();” /> 

      </center>  

      </form> 

   </body> 

</html> 

Output

After the execution of the above code, we got the following output:

In the above example, we tried to create a simple animation with the help of DOM object properties and JavaScript functions. First, we tried to get the DOM object with the help of getElementById(), then stored the object into a global variable.

Here, we also have another example of creating the animation with the help of setTimeout(), and clearTimeout() functions.

Example2

<html>  

   <head>  

      <title>JavaScript Animation</title>  

      <script type = “text/javascript”>  

            var animation ;  

            function init(){   

               img = document.getElementById(‘myimg’);      

               img.style.position = ‘relative’;     

               img.style.left = ‘0px’;  

            }   

            function towardRight(){   

               img.style.left = parseInt(img.style.left) + 10 + ‘px’;     

               animation = setTimeout(towardRight,50);  

            }   

            function stop() {      

               clearTimeout(animation);     

              img.style.left = ‘0px’;    

            }   

            window.onload = init;   

      </script>  

   </head>  

   <body>  

      <form>  

         <img id = “myimg” src = “train1.png” />  

         <center> 

         <h2 style=”color:darkred;”>Click on the following buttons to manage animation</h2>  

         <input type=”button” value=”Start” onclick = “towardRight();” />  

         <input type = “button” value=”Stop” onclick = “stop();” />  

         <center> 

      </form>     

   </body>  

</html>    

Output

After the successful execution of the above example, we got the following output:

setInterval() method

In ES6, this method is used as a classical method, which helps to create animation effects. The setInterval() method depends upon the recursive execution of the source code. It helps us to modify the frame of the element by frame.

Syntax

animation = setInterval(display, t);   // To invoked the function after t milliseconds

clearInterval(animation);                  // For terminate the process

In the above syntax, when the display function modifies the element style, the setInterval(display, t) method can be used for step-by-step modifications in element style after a time interval. If we have a small-time interval, then the animation looks regular.

Rollover with a Mouse Event

In the rollover image, the event refers to an image on which when we shift the mouse pointer, then the HTTP (Hypertext transfer protocol) modifies the image with another image. But, when we move the mouse pointer from the image, then it shows the previous image.

Here, we have an example to understand the above concept.

Example

<html> 

   <head> 

      <script type = “text/javascript”>

            if(document.images) { 

               var img1 = new Image();      

               img1.src = “cat.jpg”; 

               var img2 = new Image();      

               img2.src = “tiger.jpg”; 

            } 

      </script> 

   </head> 

   <body> 

   <center>  

      <a href = “#” onMouseOver = “document.myImg.src = img2.src;” 

         onMouseOut = “document.myImg.src = img1.src;”> 

         <img name = “myImg” src = “train.jpg” /> 

      </a><br><br> 

      <h2>Shift your mouse over the image to see the modification</h2> 

   </center> 

   </body> 

</html>

Output

After the execution of the code, we got the following output:

Page Printing in ES6

The user often requires a print button on the web page which is used to print the data on the web page with the help of a printer. JavaScript facilitates us to perform printing a web page. In JavaScript, we have window.print() function, which is used to print the current web page. Window.print() function can be used with the onclick event.

Syntax

window.print();

Example

We have an example to elaborate the above function.

<html>  

<head>   

</head>  

<body>  

    <center>  

        <h2>Hello World </h2>  

        <h3>Welcome to ES6</h3>  

        <h3>Click on the print button to see the modifications</h3>  

        <input type = “button” value = “Print” onclick = “window.print()”/> 

    </center>  

</body>  

</html>

Output

After the execution of the code, we got the following output:

When we click on the print button, then we got the following output:

The post Animation in ES6 appeared first on Tutorial And Example .