آرامش مبتنی بر فیزیک

توابع هموارسازی CSS سنتی مانند ease-in یا cubic-bezier() به منحنی‌های ساده محدود می‌شوند، که ایجاد جلوه‌های پیچیده مبتنی بر فیزیک مانند پرش یا فنر را غیرممکن می‌کند. تابع زمان‌بندی linear() این مشکل را با امکان ارائه مجموعه‌ای از توقف‌ها که می‌توانند منحنی‌های پیچیده را تقریب بزنند حل می‌کند. گذارها و پویانمایی‌ها براساس خطوط مستقیم بین ایستگاه‌ها درون‌یابی می‌شوند، اما با وجود ایستگاه‌های کافی، می‌تواند روان به‌نظر برسد.

مراحل پیاده‌سازی

1. تولید توقف‌های منحنی: رسم دستی ده‌ها نقطه برای یک فنر یا پرش غیرعملی است. از تابع زمان‌بندی کتابخانه خارجی استفاده کنید، یا از ابزاری برای تبدیل تابع تسهیل جاوا اسکریپت موجود یا مسیر SVG به نحو linear() استفاده کنید. اختیاری: این توابع زمان‌بندی را به‌عنوان ویژگی‌های سفارشی CSS ذخیره کنید تا بتوانید دوباره در سراسر سایتتان از آن‌ها استفاده کنید.
2. تعریف تابع زمان‌بندی: توقف‌های تولیدشده را روی ویژگی transition-timing-function یا animation-timing-function، یا ازطریق خلاصه transition یا animation اعمال کنید.
3. تنظیم مدت: برخلاف موتورهای فیزیک جاوا اسکریپت که مدت از ویژگی‌های فیزیکی (جرم، سختی) مشتق می‌شود، CSS همچنان به duration ثابت نیاز دارد. ممکن است لازم باشد مدت‌زمان را تنظیم کنید تا به جلوه موردنظر برسید.

مثال: Spring Easing

این مثال نشان می‌دهد که چگونه می‌توان از یک تابع سفارشی 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;
}

مثال: Bounce Easing

این مثال نشان می‌دهد که چگونه از یک تابع سفارشی 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;
}

ملاحظات کلیدی

• عملکرد: برای روان‌ترین پویانمایی‌های مبتنی بر فیزیک، linear() را روی ویژگی‌هایی اعمال کنید که در رشته‌ای جداگانه اجرا می‌شوند، مانند transform و opacity.
• دقت درمقابل پایه‌بار: اگرچه توقف‌های بیشتر منجر به منحنی هموارتر می‌شود، اما اندازه CSS شما را نیز افزایش می‌دهد. اکثر تولیدکننده‌ها به شما اجازه می‌دهند منحنی را «ساده‌سازی» کنید تا تعادل بهینه بین همواری و اندازه کد را پیدا کنید.
• اجتناب از کدر بودن برای پرش‌ها: اعمال کردن هموارسازی پرش به opacity می‌تواند باعث چشمک زدن‌های ناهنجار بصری شود اگر مقدار از ۰ کمتر یا از ۱ بیشتر شود.
• دسترس‌پذیری: پویانمایی‌های پیچیده مبتنی بر فیزیک می‌تواند برای برخی‌از کاربران حواس‌پرت‌کننده باشد یا باعث حساسیت به حرکت شود. همیشه با کاهش یا غیرفعال کردن این پویانمایی‌ها به اولویت‌های کاربر احترام بگذارید.

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

راهبردهای جایگزین

بازگشت «سرویس مقایسه قیمت»

برای مرورگرهایی که از 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);
}

جایگزین کتابخانه جاوا اسکریپت (Motion/GSAP)

اختیاری: اگر پویانمایی فیزیکی با کیفیت بالا حتی در مرورگرهای قدیمی‌تر ضروری است، از کتابخانه جاوا اسکریپت مانند Motion (motion.dev) یا GSAP (greensock.com) برای مدیریت پویانمایی در زمانی که linear() پشتیبانی نمی‌شود استفاده کنید.

1. تشخیص پشتیبانی: از CSS.supports() برای بررسی اینکه آیا مرورگر تابع linear() را مدیریت می‌کند یا نه استفاده کنید.
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 })
    });
  });
}

همچنین می‌توانید از @supports در CSS برای تشخیص صریح‌تر ویژگی استفاده کنید:

@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);
  }
}