

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to differentiate between Manual and Automated Animation in JavaScript?
Manual Animation
Under Manual Animation, the animation process is not automated. The following is the implementation of a simple animation using DOM object properties and JavaScript functions as follows. The following list contains different DOM methods.
- We are using the JavaScript function getElementById() to get a DOM object and then assigning it to a global variable imgObj.
- We have defined an initialization function init() to initialize imgObj where we have set its position and left attributes.
- We are calling the initialization function at the time of window load.
- Finally, we are calling moveRight() function to increase the left distance by 10 pixels. You could also set it to a negative value to move it to the left side.
Example
You can try to run the following code to implement animation in JavaScript,
<html> <head> <title>JavaScript Animation</title> <script> <!-- var imgObj = null; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; } window.onload =init; //--> </script> </head> <body> <form> <img id="myImage" src="/images/html.gif" /> <p>Click button below to move the image to right</p> <input type = "button" value = "Click Me" onclick = "moveRight();" /> </form> </body> </html>
Automated Animation
We can automate this process by using the 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 added a new function stop() to clear the timer set by setTimeout() function and to set the object at its initial position.
Example
You can try to run the following code to implement Automated Animation in JavaScript −
<html> <head> <title>JavaScript Animation</title> <script> <!-- var imgObj = null; var animate ; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; animate = setTimeout(moveRight,20); // call moveRight in 20msec } function stop(){ clearTimeout(animate); imgObj.style.left = '0px'; } window.onload =init; //--> </script> </head> <body> <form> <img id="myImage" src="/images/html.gif" /> <p>Click the buttons below to handle animation</p> <input type = "button" value = "Start" onclick = "moveRight();" /> <input type = "button" value = "Stop" onclick = "stop();" /> </form> </body> </html>
- Related Questions & Answers
- Difference Between Manual and Automated Testing
- How to perform Automated Unit Testing with JavaScript?
- Differentiate between ADR AND GDR.
- Differentiate between invoice and bill.
- Differentiate between investing and trading.
- Differentiate between company and firm.
- Differentiate between finance and accounting.
- Differentiate between EBIT AND EBITDA.
- Differentiate between revenue and turnover.
- Differentiate between turnover and profit.
- Differentiate between piconet and scatternet
- Differentiate between Arp and BGP
- Differentiate between offer and quotation
- Differentiate between hedging and speculation
- Differentiate between investment and speculation
Advertisements