ফিজিক্স ভিত্তিক ইজিং

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

প্রয়োগ করার বিভিন্ন ধাপ

1. কার্ভ স্টপ জেনারেট করা: স্প্রিং বা বাউন্সের জন্য ম্যানুয়ালি ডজন ডজন পয়েন্ট প্লট করা অবাস্তব। এক্সটার্নাল লাইব্রেরি থেকে টাইমিং ফাংশন ব্যবহার করুন অথবা আগে থেকে থাকা জাভাস্ক্রিপ্ট ইজিং ফাংশন বা SVG পাথকে linear() সিনট্যাক্সে কনভার্ট করতে কোনও টুল ব্যবহার করুন। ঐচ্ছিক: আপনার সাইট জুড়ে আবার ব্যবহার করার জন্য CSS কাস্টম প্রপার্টি হিসেবে এইসব টাইমিং ফাংশন স্টোর করুন।
2. টাইমিং ফাংশন নির্ধারণ করুন: তৈরি করা স্টপগুলি transition-timing-function বা animation-timing-function প্রপার্টিতে অথবা transition বা animation শর্টহ্যান্ডের মাধ্যমে প্রয়োগ করুন।
3. সময়সীমা অ্যাডজাস্ট করা: জাভাস্ক্রিপ্ট ফিজিক্স ইঞ্জিনের মতো নয় যেখানে সময়সীমা ফিজিক্যাল প্রপার্টি (ভর, অনমনীয়তা) থেকে পাওয়া যায়, CSS-এর ক্ষেত্রে এখনও একটি নির্দিষ্ট duration প্রয়োজন হয়। উদ্দেশ্য অনুযায়ী ফলাফল পেতে আপনাকে সময়সীমা অ্যাডজাস্ট করতে হতে পারে।

উদাহরণ: স্প্রিং ইজিং

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

.spring {
  /* Define the physics-based easing as a reusable variable */
  --spring-easing: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);


  /* Apply the easing with a duration that fits the spring's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.8s var(--spring-easing);
}

.spring:hover {
  scale: 1.2;
}

উদাহরণ: বাউন্স ইজিং

এই উদাহরণে দেখানো হয়েছে যে কীভাবে বাউন্স এফেক্ট তৈরি করতে কাস্টম linear() ফাংশন ব্যবহার করতে হয়।

.bounce {
  /* Define the physics-based easing as a reusable variable */
  --bounce-easing: linear(0, 0.214 14.7%, 0.386 23.7%, 0.598 31.9%, 0.999 44.7%, 0.807 52.6%, 0.762 56%, 0.747 59.4%, 0.758 62.4%, 0.793 65.6%, 0.999 77.4%, 0.961 81.2%, 0.949 84.8%, 0.956 88%, 0.993 95.5%, 1);


  /* Apply the easing with a duration that fits the bounce's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.4s var(--bounce-easing);
}

.bounce:hover {
  scale: 1.2;
}

Key Considerations

• পারফর্ম্যান্স: ফিজিক্স-ভিত্তিক অ্যানিমেশন সবচেয়ে মসৃণভাবে দেখানোর জন্য, linear()-কে এমন প্রপার্টিতে প্রয়োগ করুন যা আলাদা থ্রেডে চলে, যেমন transform ও opacity।
• প্রিসিশন বনাম পেলোড: আরও বেশি স্টপ থাকলে কার্ভ আরও মসৃণ হয়, তবে এর ফলে আপনার CSS-এর সাইজও বেড়ে যায়। বেশিরভাগ জেনারেটর আপনাকে কার্ভ "সহজ" করার অনুমতি দেয় যাতে স্মুথনেস ও কোড সাইজের মধ্যে সঠিক ভারসাম্য খুঁজে পাওয়া যায়।
• বাউন্সের জন্য অস্বচ্ছতা এড়ানো: opacity-এ বাউন্স ইজিং প্রয়োগ করলে, ভ্যালু ০-এর নিচে বা ১-এর উপরে চলে গেলে, ভিজ্যুয়ালি ঝাঁকুনি সহ ফ্লিকারিং হতে পারে।
• অ্যাক্সেসিবিলিটি: জটিল ফিজিক্স-ভিত্তিক অ্যানিমেশন কিছু ব্যবহারকারীর জন্য বিভ্রান্তিকর হতে পারে বা মোশন সেনসিটিভিটির কারণ হতে পারে। এইসব অ্যানিমেশন কমিয়ে বা বন্ধ করে সবসময় ব্যবহারকারীর পছন্দকে সম্মান করুন।

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

ফলব্যাক স্ট্র্যাটেজি

CSS ফলব্যাক

linear() কাজ করে না এমন ব্রাউজারের জন্য, ফলব্যাক হিসেবে স্ট্যান্ডার্ড ইজিং ফাংশন প্রদান করুন। ব্রাউজার linear() ভ্যালু চিনতে না পারলে, সেটি উপেক্ষা করে আগের সঠিক ঘোষণায় ফিরে যাবে।

.element {
  /* Fallback for older browsers (standard smooth exit) */
  transition: transform 0.8s ease-out;
  
  /* Modern browsers will override with the physics-based easing */
  transition-timing-function: linear(0, 1.1, 0.95, 1.02, 1);
}

জাভাস্ক্রিপ্ট লাইব্রেরি ফলব্যাক (মোশন/GSAP)

ঐচ্ছিক: পুরনো ব্রাউজারেও হাই-ফিডেলিটি ফিজিক্স অ্যানিমেশন গুরুত্বপূর্ণ হলে, linear() কাজ না করলে অ্যানিমেশন ম্যানেজ করার জন্য Motion (motion.dev) বা GSAP (greensock.com)-এর মতো জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করুন।

1. সাপোর্ট শনাক্ত করা: ব্রাউজার linear() ফাংশন ম্যানেজ করে কিনা তা চেক করতে CSS.supports() ব্যবহার করুন।
2. শর্তসাপেক্ষে লোড/প্রয়োগ করুন: কাজ না করলে, লাইব্রেরির স্প্রিং বা বাউন্স ইমপ্লিমেন্টেশন ব্যবহার করুন।

/* Detect if the browser supports the linear() function */
const supportsLinearEasing = window.CSS && CSS.supports('animation-timing-function', 'linear(0, 1)');

if (!supportsLinearEasing) {
  /* 
     Example using Motion (motion.dev) for a spring fallback.
     This should only be initialized if native CSS support is missing.
  */
  import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {
    animate(".element", { transform: "scale(1.2)" }, {
      easing: spring({ stiffness: 100, damping: 10 })
    });
  });
}

আরও স্পষ্ট ফিচার শনাক্তকরণের জন্য আপনি CSS-এ @supports ব্যবহার করতে পারেন:

@supports not (animation-timing-function: linear(0, 1)) {
  .element {
    /* Alternative experience for unsupported browsers */
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}