Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to differentiate between Manual and Automated Animation in JavaScript?
Generally, animation in JavaScript is done to get different effects and make the object move around the page. You can move and animate any type of HTML element using manual or automated animations in JavaScript.
In this tutorial, we will learn how to differentiate between manual and automated animation in JavaScript.
Manual Animation
Manual animation requires user interaction to trigger movement or changes. The animation process is not automated and depends on events like button clicks or mouse actions.
The following implementation demonstrates a simple manual animation using DOM object properties and JavaScript functions:
We use the JavaScript function getElementById to get a DOM object and assign it to a global variable imgObj
We define an initialization function init() to initialize imgObj where we set its position and left attributes
We call the initialization function at the time of window load
Finally, we call 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
Steps for Manual Animation
Step 1 ? Choose or decide the object or image that needs to be animated manually by the user.
Step 2 ? Decide the position and size of the elements.
Step 3 ? Add a button or another element that can be used with the onClick method to manually animate the object.
Step 4 ? Determine the movement or change in the object with every click.
Example
The following example shows how to create objects or add images that can be moved or animated manually using the moveRight() function.
<html>
<head>
<title>JavaScript Manual 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="/javascript/images/javascript-mini-logo.jpg" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
Automated Animation
Automated animation creates better and more user-friendly software and online games. The main benefit of using automated animation is setting the time for certain effects or movements of the objects.
We can automate the process discussed in the manual animation by using the JavaScript function setTimeout() as follows:
The moveRight() function calls 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
Steps for Automated Animation
Step 1 ? Find or create the object that will be used for automated animation.
Step 2 ? Choose the initial style and position of the object.
Step 3 ? Add a button, if required, to start and stop the animation process.
Step 4 ? Determine the time or position where the animation needs to stop or restart.
Example
You can see from the following example that an object can stop animation automatically at a certain point. This example demonstrates automated animation using setTimeout() in JavaScript.
<html>
<head>
<title>JavaScript Automated 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="/javascript/images/javascript-mini-logo.jpg" />
<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>
Key Differences
| Manual Animation | Automated Animation |
|---|---|
| Requires user interaction (clicks, mouse events) | Runs automatically using timers |
| Animation stops when user stops interacting | Animation continues until explicitly stopped |
| Uses event handlers like onclick | Uses setTimeout() or setInterval() |
| User controls timing and progression | Predefined timing controls progression |
Mouse-Based Animation
You can create animations that respond to mouse movements. This is commonly used for creating responsive buttons, images, and other interactive elements.
Syntax
if(document.images){
var animation1 = new Image();
var animation2 = new Image();
}
onMouseOver = animation2.src;
onMouseOut = animation1.src;
Example
The following example shows how an object can change its size with mouse movement over the element.
<html>
<head>
<script>
if(document.images){
var animation1 = new Image();
// Preload an image
animation1.src = "https://demo.sirv.com/nuphar.jpg?w=400&h=250";
var animation2 = new Image();
// Preload second image
animation2.src = "https://demo.sirv.com/nuphar.jpg?w=200&h=450";
}
</script>
</head>
<body>
<h3>Change in image size with the <i>movement of a mouse</i>.</h3>
<a href="#" onMouseOver="document.myImage.src=animation2.src;"
onMouseOut="document.myImage.src = animation1.src;">
<img name="myImage" src="https://demo.sirv.com/nuphar.jpg?w=400&h=250" />
</a>
</body>
</html>
Conclusion
Manual animation requires user interaction and gives users control over timing, while automated animation runs independently using JavaScript timers. Choose based on your user experience requirements and interaction design goals.
651 Views
