ম্যানুয়াল অ্যানিমেশন
ম্যানুয়াল অ্যানিমেশনে, অ্যানিমেশন প্রক্রিয়া অটোমেটেড নয়। DOM অবজেক্ট প্রপার্টি এবং জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে একটি সিম্পল অ্যানিমেশন বাস্তবায়নের নিচে দেওয়া হলো। নিচের লিস্টে বিভিন্ন DOM মেথড থাকছে।
- আমরা জাভাস্ক্রিপ্ট ফাংশন getElementById() ব্যবহার করছি একটি DOM অবজেক্ট পেতে এবং সেটিকে একটি গ্লোবাল ভেরিয়েবল
imgObj-এ অ্যাসাইন করছি। - আমরা একটি ইনিশিয়ালাইজেশন ফাংশন init() ডিফাইন করেছি imgObj ইনিশিয়ালাইজ করতে, যেখানে আমরা এর পজিশন এবং left অ্যাট্রিবিউট সেট করেছি।
- ইনিশিয়ালাইজেশন ফাংশনটি উইন্ডো লোড হওয়ার সময় কল করা হচ্ছে।
- অবশেষে, আমরা moveRight() ফাংশন কল করছি left দূরত্ব ১০ পিক্সেল বাড়াতে। আপনি এটি 네가েটিভ ভ্যালু সেট করে বাম দিকেও সরাতে পারেন।
উদাহরণ
জাভাস্ক্রিপ্টে অ্যানিমেশন বাস্তবায়ন করতে নিচের কোডটি চালিয়ে দেখুন:
<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>
