मैन्युअल एनिमेशन
मैन्युअल एनिमेशन के तहत, एनिमेशन प्रक्रिया ऑटोमेटेड नहीं होती। DOM ऑब्जेक्ट प्रॉपर्टीज़ और जावास्क्रिप्ट फंक्शन्स का उपयोग करके एक सरल एनिमेशन का कार्यान्वयन निम्नलिखित है। निम्नलिखित सूची में विभिन्न DOM मेथड्स हैं।
- हम DOM ऑब्जेक्ट प्राप्त करने के लिए जावास्क्रिप्ट फंक्शन getElementById() का उपयोग कर रहे हैं और फिर इसे ग्लोबल वेरिएबल imgObj को असाइन कर रहे हैं।
- हमने init() इनिशियलाइज़ेशन फंक्शन परिभाषित किया है imgObj को इनिशियलाइज़ करने के लिए जहां हमने इसकी पोजीशन और लेफ्ट एट्रिब्यूट्स सेट किए हैं।
- हम विंडो लोड के समय इनिशियलाइज़ेशन फंक्शन को कॉल कर रहे हैं।
- अंत में, हम moveRight() फंक्शन को कॉल कर रहे हैं ताकि लेफ्ट डिस्टेंस को 10 पिक्सल बढ़ाया जा सके। आप इसे नेगेटिव वैल्यू पर भी सेट कर सकते हैं ताकि यह बाईं ओर चले।
उदाहरण
जावास्क्रिप्ट में एनिमेशन लागू करने के लिए निम्नलिखित कोड चलाएं,
<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>ऑटोमेटेड एनिमेशन
हम जावास्क्रिप्ट फंक्शन setTimeout() का उपयोग करके इस प्रक्रिया को ऑटोमेट कर सकते हैं:
यहां हमने अधिक मेथड्स जोड़े हैं। तो आइए देखें कि यहां क्या नया है:
- moveRight() फंक्शन setTimeout() फंक्शन को कॉल कर रहा है ताकि imgObj की पोजीशन सेट की जा सके।
- हमने एक नया फंक्शन stop() जोड़ा है ताकि setTimeout() फंक्शन द्वारा सेट टाइमर को क्लियर किया जा सके और ऑब्जेक्ट को इसकी प्रारंभिक स्थिति पर सेट किया जा सके।
उदाहरण
जावास्क्रिप्ट में ऑटोमेटेड एनिमेशन लागू करने के लिए निम्नलिखित कोड चलाएं:
<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>
