जावास्क्रिप्ट में मैन्युअल और स्वचालित एनिमेशन के बीच अंतर कैसे करें?

<घंटा/>

मैन्युअल एनिमेशन

मैनुअल एनिमेशन के तहत, एनिमेशन प्रक्रिया स्वचालित नहीं होती है। डीओएम ऑब्जेक्ट गुणों और जावास्क्रिप्ट फ़ंक्शंस का उपयोग करके एक साधारण एनीमेशन का कार्यान्वयन निम्नानुसार है। निम्न सूची में विभिन्न DOM विधियाँ हैं।

हम JavaScript फ़ंक्शन का उपयोग कर रहे हैं getElementById() DOM ऑब्जेक्ट प्राप्त करने के लिए और फिर इसे वैश्विक वैरिएबल 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() इस प्रकार -

यहां हमने और तरीके जोड़े हैं। तो आइए देखें कि यहां नया क्या है -

द मूवराइट () फ़ंक्शन कॉल कर रहा है 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>