Saturday, April 25, 2020

Introduction to JavaScript Animation with examples



Hello guys! Welcome to my new tutorial post on JavaScript. In this tutorial post, am going to be discussing about the various ways in which we can use to create animations using JavaScript.

This tutorial is a little bit more complex than the previous tutorials we have had in the past so i will suggest you read through it carefully and also pay attention to details.

You can make use of JavaScript to create a complex animation having, but not limited to the following elements -

  • Fireworks
  • Fade Effect
  • Roll-in or Roll-out
  • Page-in or Page-out
  • Object Movements

JavaScript can be used to move a number of DOM elements ( <img />, <div>, or any other HTML element ), around the page according to some sort of pattern determined by a logical or analytical equation.

JavaScript provides the following two functions to be frequently used in animation program.

  • setTimeout(function, duration) - This function calls function after duration msec from now. 
  • setInterval(function, duration) - This function calls function after every duration  of msec.
  • clearTimeout(setTimeout_variable) - This will clear any time set by the setTimeout function.

JavaScript can also set a number of attributes of a DOM Object including it's position on the screen. You can set top and left attribute of an object to position it to position it anywhere on the screen. Below is its syntax.

// Sets distance from the left edge of the screen.
object.style.left =  distance in pixels or points;

Or 

// Sets distance from the top edge of the screen.
object.style.top =  distance in pixels or points;

You can also read our tutorial post on: Learning JavaScript Number Object with examples


Manual Animation

Now we are going to implement one simple animation using DOM object properties and also JavaScript functions as follows. The following list below contains DOM methods.

  • We are going to be making use of the JavaScript function getElementById() to get a DOM object and then assigning the gotten object to a global variable imgObj.
  • We are calling initialization function at the time of window load.
  • Finally we are calling the moveRight() function to increase the distance from the left by 10 pixels. You can as well set it to a negative value to move it towards the left position.

Example

Try the following example below.

<html>
     <head>
          <title>The JavaScript Animation</title>
          <script  type = "text/javascript" >
               <!--
                    var  imgObj =  null; 

                    function  init()  {
                         imgObj =  document.getElementById('Image');                 
                         imgObj.style.position =  'relative';
                         ImgObj.style.left =  '0px';
                    }
                    function  moveRight()  {
                         imgObj.style.left =  parseInt(imgObj.style.left)  +  8  +  'px';               
                    } 
                    window.onload =  init;
               //-->
          </script>
     </head>

     <body>
          <form>
               <img  Id = "Image"  src = "/images/html.gif"  />                  
               <p>Click the button below to move image to right.</p>
               <input  type = "button"  value = "Click Me"  onclick = "moveRight();"  />
          </form>
     </body>
</html>

You can also read our tutorial post on: Client-side Firm Validation in JavaScript



Automated Animation

In the above example, you will discover how an image moves to right with every click. We can as well automate this process by using JavaScript function setTimeout as follows -

Here we have added more methods. So let's see what is new here -

  • The moveRight() function is calling setTimeout function to set the position of imgObj.
  • We have also added a new function known as stop() to clear the timer set by the setTimeout() function and to also set the object at its initial position.

Example

Try the following example below.

<html>
     <head>
          <title>The JavaScript Animation</title>
          <script  type = "text/javascript" >
               <!--
                    var  imgObj =  null; 
                    var  animate;

                    function  init()  {
                         imgObj =  document.getElementById('Image');                 
                         imgObj.style.position =  'relative';
                         ImgObj.style.left =  '0px';
                    }
                    function  moveRight()  {
                         imgObj.style.left =  parseInt(imgObj.style.left)  +  8  +  'px';         
                         animate =  setTimeout (moveRight,  15) ;    // Call moveRight in 15 msec                    
                    } 
                    function  stop()  {
                         clearTimeout(animate);
                         imgObj.style.left =  '0px';
                    }
                    window.onload =  init;
               //-->
          </script>
     </head>

     <body>
          <form>
               <img  Id = "Image"  src = "/images/html.gif"  />                  
               <p>Click the button below to handle animation.</p>
               <input  type = "button"  value = "Start"  onclick = "moveRight();"  />
               <input  type = "button"  value = "Stop"   onclick = "stop();"   />
          </form>
     </body>
</html>

You can try the above code out using your text editor to see the result for yourselves and make sure the image you will be making use of will be stored in same folder with your Html files.

You can also read our tutorial post on: Understanding the W3C DOM in JavaScript


Rollover with a Mouse Event
Below is a simple example showing an image rollover with a mouse event.

Let's take a look at what we will be making use of in the following example -

  • At the time when this page is been loaded, the if statement checks for existence of the image object. If the image object is unavailable, the block will not be executed.
  • The image() constructor creates and preloads a new image  object called image1.
  • The scr property is going to be assigned the name of the external image file.
  • Similarly we have created image2 object and as well assigned /images/http.gif in this object.
  • The # (hash mark) disables the link so that the browser does not try to go to a URL when ever it is clicked. The link is an image.
  • The onMouseOver event handler is triggered when the user's mouse moves onto the link, and the onMouseOut event handler is triggered as soon as the user's mouse moves away from the image link.
  • When the mouse moves over the image, the HTTP image changes from the first image to the second one. When the mouse is moved out of the image, the original image is displayed.
  • When the mouse is moved away from the link,  the initial image html.gif will be reappeared on the screen.

<html>
     <head>
          <title>Rollover with a Mouse Event</title>
          <script  type = "text/javascript" >
               <!--
                    if ( document.images )  {
                         var  image1 =  new image();          // Preloads an image
                         image1.src = "/images/html.gif";
                         var  Image2 =  new image();          // Preloads second image        
                         image2.src = "/images/http.gif";       
                    }  
               //-->
          </script>
     </head>

     <body>            
          <p>Move your mouse over the image to see the result .</p>

          <a  href = "#"  onMouseOver = "document.myImage.src = image2.src;"    
               onMouseOut = "document.myImage.src = image1.src;"  >       
               <img  name = "myImage"  src = "/images/html.gif"  />
          </a>
     </body>
</html>

You can try the above code out using your text editor to see the result for yourselves and make sure the image you will be making use of will be stored in same folder with your Html files.

Alright guys! We have come to the end of this tutorial. In my next tutorial, i will be discussing about Multimedia in JavaScript.

Follow us on our various social media platforms available and also subscribe to our newsletter to get our tutorial delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.