জাভাস্ক্রিপ্টে ম্যানুয়াল এবং স্বয়ংক্রিয় অ্যানিমেশনের মধ্যে পার্থক্য কীভাবে করবেন?

ম্যানুয়াল অ্যানিমেশন

৷

ম্যানুয়াল অ্যানিমেশনের অধীনে, অ্যানিমেশন প্রক্রিয়া স্বয়ংক্রিয় নয়। নিম্নলিখিতটি নিম্নরূপ DOM অবজেক্ট বৈশিষ্ট্য এবং জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে একটি সাধারণ অ্যানিমেশনের বাস্তবায়ন। নিম্নলিখিত তালিকায় বিভিন্ন DOM পদ্ধতি রয়েছে৷

আমরা JavaScript ফাংশন ব্যবহার করছি getElementById() একটি DOM অবজেক্ট পেতে এবং তারপর এটিকে একটি গ্লোবাল ভেরিয়েবল imgObj এ বরাদ্দ করা।
আমরা একটি প্রারম্ভিক ফাংশন সংজ্ঞায়িত করেছি init() শুরু করতেimgObj যেখানে আমরা এর অবস্থান এবং বাম বৈশিষ্ট্যগুলি সেট করেছি৷
উইন্ডো লোডের সময় আমরা ইনিশিয়ালাইজেশন ফাংশনকে কল করছি।
অবশেষে, আমরা কল করছি moveRight() 10 পিক্সেল দ্বারা বাম দূরত্ব বৃদ্ধি ফাংশন. আপনি এটিকে বাম দিকে সরানোর জন্য একটি নেতিবাচক মানতেও সেট করতে পারেন৷

উদাহরণ

আপনি 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>

অটোমেটেড অ্যানিমেশন

আমরা JavaScript ফাংশন 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>