Animation Drawing, Layout, Photo और Designing करने की Sequence की एक प्रक्रिया है जो Multimedia और Gaming Products मे Integrate है. और Drive का भ्रम पैदा करने के लिए Animation मे अभी भी Images का Exploitation और Management शामिल होता है. एक व्यक्ति जो Animation को Design करता है उसे Animator कहा जाता है.
JavaScript Animation कुछ ऐसे Manufactures को भी संभाल सकता है जिनको CSS Control नही कर सकती है. CSS मे Animation Web पर एक महत्वपूर्ण भूमिका निभाते है जो कि विशेष रूप से CSS के Basic User Interaction से Related Simple Animation के लिए एक दम सही है.
एक Complex Animation को बनाने के लिए हम Javascript का प्रयोग करते है.
एक आसान Animation को बनाने के लिये हम DOM Object Properties और JavaScript Functions का उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Animation Examples</title>
<script type="text/javascript">
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>
<h3>JavaScript Animation Examples</h3>
<form>
<img id="myImage" src="javascript.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
हम JavaScript Function से setTimeout() का उपयोग करके स्वचालित रूप से Automated Animation को Set कर सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Automated Animation Examples</title>
<script type="text/javascript">
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>
<h3>Automated Animation Examples</h3>
<form>
<img id="myImage" src="javascript.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>