কীভাবে উচ্চ-পারফরম্যান্স সিএসএস অ্যানিমেশন তৈরি করবেন

Kayce Basques

Rachel Andrew

এই নির্দেশিকাটি আপনাকে উচ্চ-পারফরম্যান্স সম্পন্ন CSS অ্যানিমেশন তৈরি করার পদ্ধতি শেখাবে।

এই সুপারিশগুলোর পেছনের তত্ত্ব জানতে “কিছু অ্যানিমেশন কেন ধীরগতির?” দেখুন।

ব্রাউজার সামঞ্জস্যতা

এই নির্দেশিকায় সুপারিশকৃত সমস্ত CSS প্রোপার্টিগুলোর বিভিন্ন ব্রাউজারে ভালো সাপোর্ট রয়েছে।

transform

opacity

will-change

একটি উপাদান সরান

কোনো এলিমেন্ট সরাতে, transform প্রপার্টির translate বা rotation কীওয়ার্ড ভ্যালু ব্যবহার করুন।

উদাহরণস্বরূপ, কোনো আইটেমকে স্লাইড করে দৃশ্যমান করতে translate ব্যবহার করুন।

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

এলিমেন্ট ঘোরানোর জন্য rotate ব্যবহার করুন। নিচের উদাহরণটি একটি এলিমেন্টকে ৩৬০ ডিগ্রি ঘোরায়।

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

একটি উপাদানের আকার পরিবর্তন করুন

কোনো এলিমেন্টের আকার পরিবর্তন করতে, transform প্রপার্টির scale কীওয়ার্ড ভ্যালুটি ব্যবহার করুন।

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

একটি উপাদানের দৃশ্যমানতা পরিবর্তন করুন

কোনো এলিমেন্ট দেখাতে বা লুকাতে opacity ব্যবহার করুন।

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

লেআউট বা পেইন্ট ট্রিগার করে এমন বৈশিষ্ট্যগুলি এড়িয়ে চলুন।

অ্যানিমেশনের জন্য ( transform এবং opacity ছাড়া) অন্য কোনো CSS প্রপার্টি ব্যবহার করার আগে, রেন্ডারিং পাইপলাইনের উপর প্রপার্টিটির প্রভাব নির্ধারণ করুন। একান্ত প্রয়োজন না হলে, layout বা paint ট্রিগার করে এমন কোনো প্রপার্টি ব্যবহার করা থেকে বিরত থাকুন।

ফোর্স লেয়ার তৈরি

“কিছু অ্যানিমেশন কেন ধীরগতির হয়?” -তে যেমন ব্যাখ্যা করা হয়েছে, একটি নতুন লেয়ারে এলিমেন্ট রাখলে ব্রাউজার লেআউটের বাকি অংশকে পুনরায় আঁকার প্রয়োজন ছাড়াই সেগুলোকে পুনরায় আঁকতে পারে।

ব্রাউজারগুলো সাধারণত কোন আইটেমগুলোকে একটি নতুন লেয়ারে রাখা উচিত সে সম্পর্কে সঠিক সিদ্ধান্ত নিতে পারে, কিন্তু আপনি will-change প্রপার্টি ব্যবহার করে ম্যানুয়ালি লেয়ার তৈরি করতে বাধ্য করতে পারেন। নাম থেকেই বোঝা যায়, এই প্রপার্টিটি ব্রাউজারকে জানায় যে এই এলিমেন্টটি কোনোভাবে পরিবর্তিত হতে চলেছে।

CSS-এ, আপনি যেকোনো সিলেক্টরে will-change প্রয়োগ করতে পারেন:

body > .sidebar {
  will-change: transform;
}

তবে, স্পেসিফিকেশন অনুযায়ী এটি শুধুমাত্র সেইসব এলিমেন্টে যোগ করা উচিত যেগুলো সবসময় পরিবর্তন হতে পারে। উদাহরণস্বরূপ, এটি এমন একটি সাইডবারের জন্য ব্যবহার করা যেতে পারে যা ব্যবহারকারী স্লাইড করে ভেতরে-বাইরে করতে পারে। যদি এলিমেন্টটি ঘন ঘন পরিবর্তন না হয়, তাহলে যখন কোনো পরিবর্তনের সম্ভাবনা থাকে, তখন জাভাস্ক্রিপ্ট ব্যবহার করে will-change প্রয়োগ করুন। ব্রাউজারকে প্রয়োজনীয় অপটিমাইজেশন করার জন্য যথেষ্ট সময় দিতে ভুলবেন না, এবং পরিবর্তন থেমে গেলে প্রপার্টিটি সরিয়ে ফেলুন।

যেসব ব্রাউজারে will-change সাপোর্ট নেই, সেখানে লেয়ার তৈরি করতে বাধ্য করার জন্য, আপনি transform: translateZ(0) সেট করতে পারেন।

ধীর বা ত্রুটিপূর্ণ অ্যানিমেশন ডিবাগ করুন

আপনার অ্যানিমেশনগুলো কেন ধীরগতির বা ত্রুটিপূর্ণ, তা খুঁজে বের করতে ক্রোম ডেভটুলস এবং ফায়ারফক্স ডেভটুলস আপনাকে সাহায্য করতে পারে।

অ্যানিমেশন লেআউট ট্রিগার করে কিনা তা পরীক্ষা করুন

transform ছাড়া অন্য কিছু ব্যবহার করে কোনো এলিমেন্টকে সরানো হয় এমন অ্যানিমেশন ধীরগতির হওয়ার সম্ভাবনা থাকে। নিচের উদাহরণটিতে transform ব্যবহার করা একটি অ্যানিমেশনের সাথে top এবং left ব্যবহার করা একটি অ্যানিমেশনের তুলনা করা হয়েছে।

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

আপনি নিম্নলিখিত দুটি উদাহরণে এটি পরীক্ষা করতে পারেন এবং ডেভটুলস ব্যবহার করে পারফরম্যান্স খতিয়ে দেখতে পারেন।

• আগে, top ও left অ্যানিমেশন সহ ।
• পরে, transform সাথে ।

ক্রোম ডেভটুলস

1. পারফরম্যান্স প্যানেলটি খুলুন।
2. আপনার অ্যানিমেশন চলাকালীন রানটাইম পারফরম্যান্স রেকর্ড করুন ।
3. সামারি ট্যাবটি পরীক্ষা করুন।

যদি আপনি সামারি ট্যাবে রেন্ডারিং- এর জন্য একটি অশূন্য মান দেখতে পান, তাহলে এর অর্থ হতে পারে যে আপনার অ্যানিমেশনটি ব্রাউজারকে লেআউটের কাজ করতে বাধ্য করছে।

ফায়ারফক্স ডেভটুলস

ফায়ারফক্স ডেভটুলস-এ ওয়াটারফল মডেল আপনাকে বুঝতে সাহায্য করতে পারে যে ব্রাউজারটি কোথায় সময় ব্যয় করছে।

1. পারফরম্যান্স প্যানেলটি খুলুন।
2. আপনার অ্যানিমেশন চলাকালীন পারফরম্যান্স রেকর্ড করা শুরু করুন।
3. রেকর্ডিংটি থামান এবং ওয়াটারফল ট্যাবটি পরীক্ষা করুন।

যদি আপনি ‘Recalculate Style’ লেখাটি দেখতে পান, তার মানে হলো অ্যানিমেশনটি রেন্ডার করার জন্য ব্রাউজারকে রেন্ডারিং ওয়াটারফলের শুরুতে ফিরে যেতে হবে।

ড্রপ হওয়া ফ্রেম পরীক্ষা করুন

1. Chrome DevTools-এর Rendering ট্যাবটি খুলুন।
2. FPS মিটার চেকবক্সটি সক্রিয় করুন।
3. আপনার অ্যানিমেশন চলার সময় মানগুলো পর্যবেক্ষণ করুন।

FPS মিটার UI-এর উপরের দিকে থাকা Frames লেবেলটির দিকে মনোযোগ দিন। এটি 50% 1 (938 m) dropped of 1878 মতো মান দেখায়। একটি উচ্চ-পারফরম্যান্স অ্যানিমেশনের শতাংশ বেশি থাকে, যেমন 99% , যার অর্থ হলো খুব কম ফ্রেম ড্রপ হচ্ছে এবং অ্যানিমেশনটি মসৃণ দেখাচ্ছে।

একটি অ্যানিমেশন পেইন্ট ট্রিগার করে কিনা তা পরীক্ষা করুন

কিছু প্রপার্টি ব্রাউজারের জন্য আঁকতে অন্যগুলোর চেয়ে বেশি ব্যয়বহুল। উদাহরণস্বরূপ, ব্লার-সম্পর্কিত যেকোনো কিছু (যেমন একটি ছায়া) আঁকতে একটি লাল বাক্স আঁকার চেয়ে বেশি সময় লাগে। এই পার্থক্যগুলো CSS-এ সবসময় স্পষ্ট বোঝা যায় না, কিন্তু ব্রাউজারের DevTools আপনাকে শনাক্ত করতে সাহায্য করতে পারে যে কোন অংশগুলো পুনরায় আঁকা প্রয়োজন, এবং সেইসাথে পেইন্টিং-সম্পর্কিত অন্যান্য পারফরম্যান্স সমস্যাগুলোও চিহ্নিত করতে পারে।

ক্রোম ডেভটুলস

1. Chrome DevTools-এর Rendering ট্যাবটি খুলুন।
2. পেইন্ট ফ্ল্যাশিং নির্বাচন করুন।
3. স্ক্রিনে পয়েন্টারটি ঘোরান।

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

কোনো নির্দিষ্ট প্রপার্টি পেইন্টিং-সংক্রান্ত পারফরম্যান্স সমস্যার কারণ হচ্ছে কিনা তা নির্ধারণ করতে হলে, Chrome DevTools-এর পেইন্ট প্রোফাইলার সাহায্য করতে পারে।

ফায়ারফক্স ডেভটুলস

1. সেটিংস খুলুন এবং পেইন্ট ফ্ল্যাশিং টগল করার জন্য একটি টুলবক্স বাটন যোগ করুন।
2. যে পৃষ্ঠাটি আপনি পরিদর্শন করতে চান, সেখানে বাটনটি অন করুন এবং হাইলাইট করা অংশগুলো দেখতে আপনার মাউস নাড়ান বা স্ক্রল করুন।

কম্পোজিট পর্যায়ে অ্যানিমেট করুন

যেখানে সম্ভব, অ্যানিমেশনগুলোকে রেন্ডারিং পাথের কম্পোজিটিং পর্যায়ে রাখার জন্য opacity এবং transform মধ্যে সীমাবদ্ধ রাখুন। আপনার অ্যানিমেশনগুলো পাথের কোন পর্যায়কে প্রভাবিত করছে তা পরীক্ষা করতে ডেভটুলস ব্যবহার করুন।

কোনো পেইন্ট অপারেশন বিশেষভাবে ব্যয়বহুল কিনা তা দেখতে পেইন্ট প্রোফাইলার ব্যবহার করুন। যদি এমন কিছু খুঁজে পান, তবে যাচাই করে দেখুন অন্য কোনো CSS প্রপার্টি আরও ভালো পারফরম্যান্সের সাথে একই রকম চেহারা ও অনুভূতি দেয় কিনা।

will-change প্রপার্টিটি খুব কম ব্যবহার করুন, এবং শুধুমাত্র তখনই ব্যবহার করুন যখন আপনি কোনো পারফরম্যান্স সমস্যার সম্মুখীন হন।