CSS বনাম জাভাস্ক্রিপ্ট অ্যানিমেশন

আপনি CSS বা JavaScript দিয়ে অ্যানিমেট করতে পারেন। আপনি কোনটি ব্যবহার করা উচিত এবং কেন?

Paul Lewis

Sam Thorogood

ওয়েবে অ্যানিমেশন তৈরি করার দুটি প্রাথমিক উপায় রয়েছে: CSS এবং JavaScript দিয়ে। আপনি কোনটি চয়ন করবেন তা আপনার প্রকল্পের অন্যান্য নির্ভরতার উপর নির্ভর করে এবং আপনি কী ধরণের প্রভাব অর্জন করার চেষ্টা করছেন।

সারাংশ

• সহজতর "এক-শট" ট্রানজিশনের জন্য CSS অ্যানিমেশন ব্যবহার করুন, যেমন UI এলিমেন্ট স্টেট টগল করা।
• যখন আপনি বাউন্সিং, স্টপ, পজ, রিওয়াইন্ড বা স্লো ডাউনের মতো উন্নত প্রভাব পেতে চান তখন জাভাস্ক্রিপ্ট অ্যানিমেশন ব্যবহার করুন।
• আপনি যদি জাভাস্ক্রিপ্টের সাথে অ্যানিমেট করতে চান, তাহলে ওয়েব অ্যানিমেশন API বা একটি আধুনিক ফ্রেমওয়ার্ক ব্যবহার করুন যা আপনি স্বাচ্ছন্দ্য বোধ করেন।

বেশিরভাগ মৌলিক অ্যানিমেশন CSS বা JavaScript দিয়ে তৈরি করা যেতে পারে, কিন্তু প্রচেষ্টার পরিমাণ এবং সময় আলাদা (এছাড়াও CSS বনাম জাভাস্ক্রিপ্ট পারফরম্যান্স দেখুন)। প্রতিটিরই তার সুবিধা এবং অসুবিধা রয়েছে তবে এগুলি ভাল নির্দেশিকা:

• UI উপাদানগুলির জন্য আপনার কাছে ছোট, স্বয়ংসম্পূর্ণ অবস্থা থাকলে CSS ব্যবহার করুন। সিএসএস ট্রানজিশন এবং অ্যানিমেশনগুলি পাশ থেকে একটি নেভিগেশন মেনু আনার জন্য বা একটি টুলটিপ দেখানোর জন্য আদর্শ। আপনি রাজ্যগুলি নিয়ন্ত্রণ করতে জাভাস্ক্রিপ্ট ব্যবহার করে শেষ করতে পারেন, তবে অ্যানিমেশনগুলি নিজেরাই আপনার CSS-এ থাকবে।
• আপনার অ্যানিমেশনগুলির উপর গুরুত্বপূর্ণ নিয়ন্ত্রণের প্রয়োজন হলে JavaScript ব্যবহার করুন। ওয়েব অ্যানিমেশন এপিআই হল মান-ভিত্তিক পদ্ধতি, যা বর্তমানে বেশিরভাগ আধুনিক ব্রাউজারে উপলব্ধ। এটি বাস্তব বস্তু প্রদান করে, জটিল বস্তু-ভিত্তিক অ্যাপ্লিকেশনের জন্য আদর্শ। আপনার অ্যানিমেশনগুলিকে থামাতে, বিরতি দিতে, গতি কমাতে বা বিপরীত করার প্রয়োজন হলে জাভাস্ক্রিপ্টও কার্যকর।
• আপনি যখন হাত দিয়ে একটি সম্পূর্ণ দৃশ্য অর্কেস্ট্রেট করতে চান তখন সরাসরি requestAnimationFrame ব্যবহার করুন। এটি একটি উন্নত জাভাস্ক্রিপ্ট পদ্ধতি, তবে আপনি যদি একটি গেম তৈরি করেন বা একটি HTML ক্যানভাসে অঙ্কন করেন তবে এটি কার্যকর হতে পারে৷

বিকল্পভাবে, আপনি যদি ইতিমধ্যেই একটি JavaScript ফ্রেমওয়ার্ক ব্যবহার করছেন যাতে অ্যানিমেশন কার্যকারিতা অন্তর্ভুক্ত থাকে, যেমন jQuery-এর .animate() পদ্ধতি বা GreenSock-এর TweenMax এর মাধ্যমে, তাহলে আপনার অ্যানিমেশনগুলির জন্য এটির সাথে লেগে থাকা সামগ্রিকভাবে আরও সুবিধাজনক বলে মনে হতে পারে৷

CSS দিয়ে অ্যানিমেট করুন

সিএসএস দিয়ে অ্যানিমেটিং হল স্ক্রিনে কিছু সরানোর সহজ উপায়। এই পদ্ধতিটিকে ঘোষণামূলক হিসাবে বর্ণনা করা হয়েছে, কারণ আপনি কী ঘটতে চান তা নির্দিষ্ট করুন৷

নীচে কিছু CSS আছে যা X এবং Y উভয় অক্ষে 100px এলিমেন্টকে সরিয়ে দেয়। এটি একটি CSS ট্রানজিশন ব্যবহার করে করা হয়েছে যা 500ms নিতে সেট করা হয়েছে। যখন move ক্লাস যোগ করা হয়, তখন transform মান পরিবর্তিত হয় এবং রূপান্তর শুরু হয়।

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

চেষ্টা করে দেখুন

স্থানান্তরের সময়কাল ছাড়াও, সহজ করার বিকল্প রয়েছে, যা মূলত অ্যানিমেশনটি কেমন অনুভব করে। সহজীকরণ সম্পর্কে আরও তথ্যের জন্য, সহজ করার প্রাথমিক নির্দেশিকা দেখুন।

যদি, উপরের স্নিপেটের মতো, আপনি আপনার অ্যানিমেশনগুলি পরিচালনা করার জন্য পৃথক CSS ক্লাস তৈরি করেন, তাহলে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে প্রতিটি অ্যানিমেশন চালু এবং বন্ধ করতে টগল করতে পারেন:

box.classList.add('move');

এটি করা আপনার অ্যাপগুলিতে একটি সুন্দর ভারসাম্য প্রদান করে। আপনি JavaScript-এর সাহায্যে স্থিতি পরিচালনার উপর ফোকাস করতে পারেন, এবং অ্যানিমেশনগুলি পরিচালনা করার জন্য ব্রাউজারকে রেখে কেবলমাত্র লক্ষ্য উপাদানগুলিতে উপযুক্ত ক্লাস সেট করতে পারেন। আপনি যদি এই রুটে যান, আপনি উপাদানটিতে transitionend ইভেন্টগুলি শুনতে পারেন, তবে শুধুমাত্র যদি আপনি ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলির জন্য সমর্থন ত্যাগ করতে সক্ষম হন; সংস্করণ 10 এই ইভেন্ট সমর্থন করার প্রথম সংস্করণ ছিল. অন্যান্য সমস্ত ব্রাউজার কিছু সময়ের জন্য ইভেন্টটিকে সমর্থন করেছে৷

একটি ট্রানজিশনের শেষের জন্য শোনার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট এইরকম দেখায়:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

CSS ট্রানজিশন ব্যবহার করার পাশাপাশি, আপনি CSS অ্যানিমেশনগুলিও ব্যবহার করতে পারেন, যা আপনাকে পৃথক অ্যানিমেশন কীফ্রেম, সময়কাল এবং পুনরাবৃত্তির উপর অনেক বেশি নিয়ন্ত্রণ করতে দেয়।

দ্রষ্টব্য: আপনি যদি অ্যানিমেশনে নতুন হন তবে কীফ্রেমগুলি হাতে আঁকা অ্যানিমেশনগুলির একটি পুরানো শব্দ৷ অ্যানিমেটররা একটি অংশের জন্য নির্দিষ্ট ফ্রেম তৈরি করবে, যাকে কী ফ্রেম বলা হয়, যা কিছু গতির সবচেয়ে চরম অংশের মতো জিনিসগুলিকে ক্যাপচার করবে এবং তারপরে তারা কীফ্রেমের মধ্যে সমস্ত পৃথক ফ্রেম আঁকার জন্য সেট করবে। CSS অ্যানিমেশনগুলির সাথে আমাদের আজ একই রকম প্রক্রিয়া রয়েছে, যেখানে আমরা ব্রাউজারকে নির্দেশ দিই যে প্রদত্ত পয়েন্টগুলিতে CSS বৈশিষ্ট্যগুলির কী মান থাকা দরকার এবং এটি শূন্যস্থান পূরণ করে।

আপনি, উদাহরণস্বরূপ, ট্রানজিশনের মাধ্যমে বক্সটিকে একইভাবে অ্যানিমেট করতে পারেন, কিন্তু ক্লিক করার মতো কোনো ব্যবহারকারীর ইন্টারঅ্যাকশন ছাড়াই এবং অসীম পুনরাবৃত্তি সহ এটিকে অ্যানিমেট করতে পারেন। আপনি একই সময়ে একাধিক বৈশিষ্ট্য পরিবর্তন করতে পারেন।

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

চেষ্টা করে দেখুন

CSS অ্যানিমেশনের সাহায্যে আপনি অ্যানিমেশনটিকে লক্ষ্য উপাদান থেকে স্বাধীনভাবে সংজ্ঞায়িত করেন এবং প্রয়োজনীয় অ্যানিমেশন বেছে নিতে animation-name বৈশিষ্ট্য ব্যবহার করেন।

আপনি যদি আপনার CSS অ্যানিমেশনগুলি পুরানো ব্রাউজারগুলিতে কাজ করতে চান তবে আপনাকে বিক্রেতা উপসর্গ যোগ করতে হবে। অনেক টুল আপনাকে আপনার প্রয়োজনীয় CSS এর প্রিফিক্সড ভার্সন তৈরি করতে সাহায্য করতে পারে, যা আপনাকে আপনার সোর্স ফাইলে আনপ্রিফিক্সড ভার্সন লিখতে দেয়।

জাভাস্ক্রিপ্ট এবং ওয়েব অ্যানিমেশন API দিয়ে অ্যানিমেট করুন

জাভাস্ক্রিপ্ট দিয়ে অ্যানিমেশন তৈরি করা, তুলনামূলকভাবে, CSS ট্রানজিশন বা অ্যানিমেশন লেখার চেয়ে জটিল, কিন্তু এটি সাধারণত ডেভেলপারদের উল্লেখযোগ্যভাবে বেশি শক্তি প্রদান করে। আপনি ওয়েব অ্যানিমেশন API ব্যবহার করতে পারেন নির্দিষ্ট CSS বৈশিষ্ট্য অ্যানিমেট করতে বা কম্পোজযোগ্য প্রভাব বস্তু তৈরি করতে।

জাভাস্ক্রিপ্ট অ্যানিমেশনগুলি অপরিহার্য , কারণ আপনি সেগুলিকে আপনার কোডের অংশ হিসাবে ইনলাইনে লেখেন। আপনি এগুলিকে অন্যান্য বস্তুর ভিতরেও এনক্যাপসুলেট করতে পারেন। নীচে জাভাস্ক্রিপ্ট যা আপনাকে আগে বর্ণিত CSS ট্রানজিশন পুনরায় তৈরি করতে লিখতে হবে:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

ডিফল্টরূপে, ওয়েব অ্যানিমেশন শুধুমাত্র একটি উপাদানের উপস্থাপনা পরিবর্তন করে। আপনি যদি আপনার বস্তুটি যেখানে স্থানান্তরিত হয়েছে সেখানেই থাকতে চান, তাহলে আমাদের নমুনা অনুসারে অ্যানিমেশন শেষ হয়ে গেলে আপনাকে এর অন্তর্নিহিত শৈলীগুলি সংশোধন করা উচিত।

চেষ্টা করে দেখুন

ওয়েব অ্যানিমেশন API W3C থেকে একটি অপেক্ষাকৃত নতুন মান। এটি বেশিরভাগ আধুনিক ব্রাউজারে স্থানীয়ভাবে সমর্থিত। অ-সমর্থিত আধুনিক ব্রাউজারগুলির জন্য, একটি পলিফিল উপলব্ধ ।

JavaScript অ্যানিমেশনের সাথে, আপনি প্রতিটি ধাপে একটি উপাদানের শৈলীর সম্পূর্ণ নিয়ন্ত্রণে আছেন। এর অর্থ হল আপনি অ্যানিমেশনগুলিকে মন্থর করতে পারেন, সেগুলিকে থামাতে পারেন, সেগুলিকে থামাতে পারেন, সেগুলিকে বিপরীত করতে পারেন এবং উপাদানগুলিকে আপনার উপযুক্ত মনে করতে পারেন৷ আপনি যদি জটিল, অবজেক্ট-ওরিয়েন্টেড অ্যাপ্লিকেশন তৈরি করেন তবে এটি বিশেষভাবে কার্যকর, কারণ আপনি আপনার আচরণকে সঠিকভাবে এনক্যাপসুলেট করতে পারেন।