কোন DOM অ্যানিমেশন কৌশলটি তোমার ব্যবহার করা উচিত?

You've now seen three techniques that let you animate parts of your webpage: window.setInterval/setTimeout, window.requestAnimationFrame, and CSS animations/transitions.

কৌশলটি ব্যবহার বাছাই করার জন্য নিচের বিষয়গুলো বিবেচনা করা উচিত:

ওয়েবপেজ বানানোর সময় পারফরম্যান্স (performance) একটি গুরুত্বপূর্ণ বিষয়, এজন্য আমরা এটার ব্যাপারে ভালোভাবে খেয়াল রাখি। যাই হোক, নতুন ব্রাউজার বের হলে ব্রাউজারের কর্মদক্ষতার পরিবর্তন ঘটে এবং মোবাইল ব্রাউজার ডেক্সটপ (desktop) ব্রাউজার থেকে পুরোপুরি আলাদাভাবে কাজ করতে পারে। তাই আজকে যে কৌশলটি খুবই কার্যকরী, আগামীকাল সেই কৌশলটি নাও থাকতে পারে। বর্তমানকালে, সিএসএস (CSS) animations/transitions হল সবচেয়ে কার্যকরী, তারপর requestAnimationFrame এবং তারপর setInterval।

কিন্তু সিএসএস সবকিছু করতে পারেনা। উদাহরণস্বরূপ, <canvas> (ক্যানভাস) ট্যাগে পিক্সেল এবং আকৃতি আঁকার সময় fillRect() ফাংশন ব্যবহার করতে হবে, তুমি এখানে সিএসএস ব্যবহার করতে পারবে না। ফাংশনগুলোকে পর্যায়ক্রমে কল করার জন্য requestAnimationFrame অথবা setInterval ব্যবহার করতে হবে। আসলে, খান একাডেমিতে আমরা এটাই ProcessingJS এ করে থাকি। ProcessingJS হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা একটি <canvas> ট্যাগে কোড করে এবং কোডে draw() ফাংশন সংজ্ঞায়িত করলে ProcessingJS setInterval ব্যবহার করে frameRate অনুসারে বার বার draw() ফাংশনকে কল করতে থাকে।

কখনো কখনো পর্যায়ক্রমে জাভাস্ক্রিপ্ট ফাংশন কল করা হয়,কিন্তু এটার কারণ অ্যানিমেশন নয়। একটি সার্ভার থেকে আপডেট নেওয়া যায়, টুইটারের সমসাময়িক সংবাদের মত। এক্ষেত্রে, শুধুমাত্র setInterval ব্যবহার করতে হয় এবং এখানে সময় সঠিক না হলেও কোন সমস্যা নেই কারণ প্রতি মিনিটেই এটাকে কল করা হচ্ছে। খান একাডেমির সহায়তার অনুরোধ পেজে আমরা এই কাজটিই করে থাকি, বিরতিহীনভাবে প্রতি 2 মিনিট পর পর নতুন সহায়তার অনুরোধ পরীক্ষা করে দেখা হয়।

অবশ্যই, ব্রাউজারের সামঞ্জস্যতার কথা মাথায় রাখতে হবে। ইন্টারনেট এক্সপ্লোরার (IE9) এর জন্য কোড লেখার সময় requestAnimationFrame অথবা সিএসএস (CSS) অ্যানিমেশন ব্যবহার করা যায় না। কয়েকটি কৌশলের সমন্বয় ব্যবহার করতে হবে যা ব্রাউজারগুলোতে কাজ করবে অথবা একটি লাইব্রেরি খুঁজতে হবে যা এই কাজটি করে দেবে, উদাহরণস্বরূপ Velocity.js।

এইসব কৌশল শেখার জন্য আরও অনেক কিছু রয়েছে। শেখার জন্য নিচের বিষয়গুলো দেখা উচিতঃ

ডক্টর হু এর ভক্তদের জন্য বোনাস: সিএসএস 3 অ্যানিমেশনের জন্য আমার অন্যতম প্রিয় উদাহরণ হল অ্যানিমেটেড TARDIS।