ওয়েব অ্যানিমেশন এপিআই জাভাস্ক্রিপ্ট থেকে ইম্পারেটিভ অ্যানিমেশন বর্ণনা করার জন্য শক্তিশালী প্রিমিটিভ প্রদান করে — কিন্তু এর মানে কী? গুগলের ডেমো এবং কোডল্যাব সহ আপনার জন্য উপলব্ধ রিসোর্সগুলো সম্পর্কে জেনে নিন।
পটভূমি
এর মূলে, এপিআইটি Element.animate() মেথডটি প্রদান করে। চলুন একটি উদাহরণ দেখি, যা ব্যাকগ্রাউন্ডের রঙ লাল থেকে সবুজে অ্যানিমেট করে।
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
এই পদ্ধতিটি সমস্ত আধুনিক ব্রাউজারে সমর্থিত, এবং এর একটি চমৎকার পলিফিল ফলব্যাকও রয়েছে (এ বিষয়ে পরে আরও আলোচনা করা হবে)। এই পদ্ধতির - এবং এর প্লেয়ার অবজেক্টের - নেটিভ সাপোর্ট ক্রোম ৩৯- এর অংশ হিসেবে ব্যাপকভাবে উপলব্ধ হয়। এটি অপেরাতেও নেটিভভাবে উপলব্ধ , এবং ফায়ারফক্সের জন্য এর সক্রিয় উন্নয়ন চলছে। এটি একটি শক্তিশালী প্রিমিটিভ যা আপনার টুলবক্সে একটি স্থান পাওয়ার যোগ্য।
কোডল্যাবস
ওয়েব অ্যানিমেশন এপিআই-এর জন্য ক্রমবর্ধমান সংখ্যক কোডল্যাব উপলব্ধ রয়েছে । এগুলি হলো স্ব-গতিসম্পন্ন নির্দেশিকা, যা এপিআই-এর বিভিন্ন ধারণা প্রদর্শন করে। এই কোডল্যাবগুলির বেশিরভাগেই, আপনি স্থির বিষয়বস্তুকে অ্যানিমেশন ইফেক্ট দিয়ে উন্নত করবেন।
আপনি যদি ওয়েব অ্যানিমেশনে উপলব্ধ নতুন প্রিমিটিভগুলো বুঝতে চান, তাহলে এই কোডল্যাবগুলো এবং এর সাথে সম্পর্কিত লিঙ্ক বা রিসোর্সগুলোই শুরু করার জন্য সেরা জায়গা। আপনি কী তৈরি করতে পারেন সে সম্পর্কে ধারণা পেতে, অ্যান্ড্রয়েড-অনুপ্রাণিত এই রিভিল ইফেক্টটি দেখুন।
সুতরাং আপনি যদি সবে শুরু করে থাকেন, তাহলে আর কোথাও খোঁজার দরকার নেই!
ডেমো
আপনি যদি অনুপ্রেরণা খুঁজে থাকেন, তাহলে অবশ্যই গিটহাবে হোস্ট করা ম্যাটেরিয়াল-অনুপ্রাণিত ওয়েব অ্যানিমেশন ডেমোগুলো দেখে নিন। এগুলোতে বিভিন্ন ধরনের চমৎকার ইফেক্ট দেখানো হয়েছে এবং আপনি প্রতিটি ডেমোর সোর্স কোড সরাসরি দেখতে পারবেন।
ডেমোগুলোর মধ্যে রয়েছে একটি রঙিন ঘূর্ণায়মান ছায়াপথ , আবর্তনশীল পৃথিবী , কিংবা এমনকি একটি সাধারণ উপাদানের উপর বিভিন্ন ধরনের ইফেক্ট ।
পলিফিল
সকল আধুনিক ব্রাউজারে চমৎকার সমর্থন নিশ্চিত করতে, আপনি একটি পলিফিল লাইব্রেরি ব্যবহার করতে পারেন। ওয়েব অ্যানিমেশনস এপিআই-এর একটি পলিফিল বর্তমানে উপলব্ধ আছে, যা এটিকে ইন্টারনেট এক্সপ্লোরার, ফায়ারফক্স এবং সাফারি সহ সকল আধুনিক ব্রাউজারে নিয়ে আসে।
আপনি যদি নতুন কিছু চেষ্টা করতে চান, তাহলে web-animations-next পলিফিলটি ব্যবহার করতে পারেন, যেটিতে এমন কিছু বৈশিষ্ট্যও অন্তর্ভুক্ত রয়েছে যা এখনও চূড়ান্ত করা হয়নি — যেমন কম্পোজেবল GroupEffect এবং SequenceEffect কনস্ট্রাক্টর। দুটি পলিফিলের মধ্যে তুলনার জন্য হোমপেজ দেখুন ।
আপনার কোডে যেকোনো একটি পলিফিল ব্যবহার করার জন্য কয়েকটি বিকল্প রয়েছে।
cdnjs , jsDelivr- এর মতো একটি CDN ব্যবহার করুন, অথবা rawgit.com-এর মাধ্যমে একটি নির্দিষ্ট রিলিজকে টার্গেট করুন।
NPM বা Bower ব্যবহার করে ইনস্টল করুন
$ npm install web-animations-js $ bower install web-animations-js ```
সব ক্ষেত্রেই, আপনি অন্য যেকোনো কোডের আগে একটি স্ক্রিপ্ট ট্যাগের মধ্যে পলিফিলটি অন্তর্ভুক্ত করতে পারেন।
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
অন্যান্য সম্পদ
আপনি যদি আরও প্রযুক্তিগত ভূমিকা পড়তে চান, তাহলে W3C স্পেকটি দেখুন।
ড্যান উইলসনও ওয়েব অ্যানিমেশনের উপর বেশ কিছু চমৎকার পোস্ট লিখেছেন, যার মধ্যে নতুন CSS motion-path প্রপার্টির সাথে এর ব্যবহার পদ্ধতিও অন্তর্ভুক্ত। motion-path ব্যবহার করে কিছু নমুনার জন্য, এরিক উইলিগার্সের ডকুমেন্টেশনটি দেখুন।