লিনিয়ার() ইজিং ফাংশন দিয়ে CSS-এ জটিল অ্যানিমেশন কার্ভ তৈরি করুন

CSS-এর একটি ইজিং ফাংশন linear() উপস্থাপন করা হচ্ছে, যা এর পয়েন্টগুলোর মধ্যে রৈখিকভাবে ইন্টারপোলেট করে এবং এর মাধ্যমে আপনি বাউন্স ও স্প্রিং ইফেক্ট পুনরায় তৈরি করতে পারবেন।

Bramus

CSS-এ ইজিং

CSS-এ এলিমেন্ট অ্যানিমেট বা ট্রানজিশন করার সময়, আপনি animation-timing-function এবং transition-timing-function প্রপার্টি ব্যবহার করে একটি ইজিং ফাংশনের মাধ্যমে কোনো ভ্যালু পরিবর্তনের হার নিয়ন্ত্রণ করেন।

CSS-এ প্রিসেট হিসেবে বেশ কিছু কীওয়ার্ড পাওয়া যায়, যেমন linear , ease , ease-in , ease-out এবং ease-in-out । আপনার নিজস্ব ইজিং কার্ভ তৈরি করতে cubic-bezier() ফাংশনটি ব্যবহার করুন, অথবা steps() ইজিং ফাংশনটি ব্যবহার করে ধাপ-ভিত্তিক পদ্ধতি অবলম্বন করুন।

সঠিকভাবে ব্যবহার করা হলে, ইজিং একটি অ্যানিমেটেড উপাদানকে ওজনদার অনুভূতি দেয়, কারণ দেখে মনে হয় এটি গতি সঞ্চয় করছে।

Creating complex curves such as bounce or spring effects is not possible in CSS, but thanks to linear() you can now approximate them astonishingly well.

linear() এর একটি ভূমিকা

A new way to define an easing in CSS is with linear() . This function accepts a number of stops, separated by commas. Each stop is a single number that ranges from 0 to 1. In between each stop the interpolation is done in a linear way, explaining the name of the function.

animation-timing-function: linear(0, 0.25, 1);

এই স্টপগুলো ডিফল্টভাবে সমান দূরত্বে ছড়ানো থাকে। আগের কোড স্নিপেটটিতে, এর মানে হলো ৫০% পয়েন্টে 0.25 আউটপুট মানটি ব্যবহৃত হবে।

দৃশ্যমান করলে, linear(0, 0.25, 1) এর গ্রাফটি দেখতে এইরকম:

যদি আপনি না চান যে স্টপগুলো সমান দূরত্বে ছড়ানো থাকুক, তাহলে আপনি ঐচ্ছিকভাবে একটি স্টপ লেংথ (stop length) নির্ধারণ করে দিতে পারেন। স্টপ লেংথ হিসেবে একটিমাত্র মান দেওয়ার সময়, আপনি এর শুরুর বিন্দুটি নির্ধারণ করেন:

animation-timing-function: linear(0, 0.25 75%, 1);

এখানে, 0.25 এর একটি আউটপুট মান 50% এ ব্যবহৃত হবে না, কিন্তু 75% এ ব্যবহৃত হবে।

স্টপ লেংথ হিসেবে দুটি মান নির্দিষ্ট করার সময়, আপনাকে এর শুরু এবং শেষ বিন্দু উভয়ই নির্ধারণ করতে হয়:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

সময়ের ২৫% থেকে ৭৫% পর্যন্ত ০.২৫ আউটপুট মান ব্যবহার করা হবে।

জটিল বক্ররেখা তৈরি করুন

যদিও পূর্ববর্তী উদাহরণগুলো সরল ইজিং, আপনি কিছুটা নির্ভুলতার সাথে আপোস করে linear() ব্যবহার করে জটিল ইজিং ফাংশনগুলোও পুনরায় তৈরি করতে পারেন।

এই বাউন্স ইজিং কার্ভটি দেখুন, এটি এক ধরনের ইজিং যা সরাসরি CSS-এ প্রকাশ করা যায় না এবং জাভাস্ক্রিপ্ট ব্যবহার করে সংজ্ঞায়িত করা হয়:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

কোডটি হয়তো আপনাকে খুব বেশি কিছু বলবে না, কিন্তু একটি ভিজ্যুয়ালাইজেশন বলতে পারে। এখানে আউটপুটটি একটি নীল বক্ররেখা হিসাবে দেখানো হলো:

এর সাথে কয়েকটি স্টপ যোগ করে বক্ররেখাটিকে সরল করা যায়। এখানে, প্রতিটি সবুজ বিন্দু একটি স্টপ নির্দেশ করে:

When passed into linear() , the result is a curve that kinda looks like the original one, but is a bit rougher on the edges.

সবুজ অ্যানিমেটেড বক্সটির সাথে নীলটি তুলনা করলেই বুঝতে পারবেন যে এটি ততটা মসৃণ নয়।

কিন্তু, যথেষ্ট সংখ্যক স্টপ যোগ করলে মূল বক্ররেখাটির বেশ ভালো একটি আনুমানিক রূপ পাওয়া যায়। এখানে একটি হালনাগাদ সংস্করণ দেওয়া হলো:

শুধুমাত্র স্টপের সংখ্যা দ্বিগুণ করলেই আপনি একটি মসৃণ ফলাফল পেয়ে যান।

অ্যানিমেট করার জন্য ব্যবহৃত কোডটি দেখতে এইরকম:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

সাহায্য করার একটি সরঞ্জাম

ম্যানুয়ালি এই স্টপগুলির তালিকা তৈরি করা খুবই কষ্টসাধ্য হবে। সৌভাগ্যবশত, জেক এবং অ্যাডাম একটি টুল তৈরি করেছেন যা আপনাকে একটি ইজিং কার্ভকে তার linear() প্রতিরূপে রূপান্তর করতে সাহায্য করবে ।

এই টুলটি ইনপুট হিসেবে একটি জাভাস্ক্রিপ্ট ইজিং ফাংশন বা SVG কার্ভ গ্রহণ করে এবং linear() ফাংশন ব্যবহার করে সরলীকৃত কার্ভটি আউটপুট হিসেবে প্রদান করে। আপনার কাঙ্ক্ষিত স্টপের সংখ্যা এবং সেগুলোর নির্ভুলতা নিয়ন্ত্রণ করতে স্লাইডারগুলো ব্যবহার করুন।

উপরের ডানদিকে, আপনি প্রিসেটগুলোর মধ্যে একটি বেছে নিতে পারেন: এর মধ্যে স্প্রিং, বাউন্স, সিম্পল ইলাস্টিক, অথবা মেটেরিয়াল ডিজাইন এমফাসাইজড ইজিং অন্তর্ভুক্ত রয়েছে।

ডেভটুলস সমর্থন

DevTools-এ linear() ফাংশনের ফলাফল দেখা ও সম্পাদনা করার সুবিধা রয়েছে। আইকনটিতে ক্লিক করলে একটি ইন্টারেক্টিভ টুলটিপ দেখা যাবে, যা আপনাকে স্টপগুলো টেনে সরাতে দেবে।

এই DevTools ফিচারটি Chrome 114 থেকে DevTools-এ উপলব্ধ।