منحنی های انیمیشن پیچیده را در CSS با تابع easing linear() ایجاد کنید

معرفی linear() ، یک تابع آسان‌سازی در CSS که به صورت خطی بین نقاط آن درون‌یابی می‌کند و به شما امکان می‌دهد افکت‌های جهشی و فنری را دوباره ایجاد کنید.

Bramus

تسهیلات در CSS

هنگام متحرک سازی یا انتقال عناصر در CSS، با استفاده از ویژگی های animation-timing-function و transition-timing-function گذار، سرعت تغییر یک مقدار را با یک تابع آسان کننده کنترل می کنید.

کلمات کلیدی متعددی به عنوان از پیش تعیین شده در CSS وجود دارد که عبارتند از linear , ease , ease-in , ease-out و ease-in-out . برای ایجاد منحنی‌های آسان‌سازی خود، از تابع cubic-bezier() استفاده کنید یا با استفاده از تابع easing steps() از یک رویکرد مبتنی بر گام استفاده کنید.

هنگامی که به طور مناسب استفاده می شود، کاهش وزن به یک عنصر متحرک احساس وزن می دهد، زیرا به نظر می رسد شتاب بیشتری دارد.

ایجاد منحنی‌های پیچیده مانند افکت‌های پرش یا فنری در CSS امکان‌پذیر نیست، اما به لطف linear() اکنون می‌توانید به‌خوبی آن‌ها را تقریب کنید.

مقدمه ای برای linear()

یک راه جدید برای تعریف easing در CSS با linear() است. این تابع تعدادی توقف را می پذیرد که با کاما از هم جدا شده اند. هر توقف یک عدد واحد است که از 0 تا 1 متغیر است. در بین هر توقف، درون یابی به صورت خطی انجام می شود و نام تابع را توضیح می دهد.

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

این استاپ‌ها به‌طور پیش‌فرض در فاصله مساوی پخش می‌شوند. در قطعه قبلی، به این معنی است که مقدار خروجی 0.25 در علامت 50٪ استفاده می شود.

با تجسم، نمودار linear(0, 0.25, 1) به شکل زیر است:

اگر نمی‌خواهید استاپ‌ها به فاصله مساوی پخش شوند، می‌توانید به صورت اختیاری در طول توقف عبور کنید. هنگام عبور از یک مقدار به عنوان طول توقف، نقطه شروع آن را تعریف می کنید:

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

در اینجا، مقدار خروجی 0.25 در علامت 50% استفاده نمی شود، بلکه در 75% می شود.

هنگام تعیین دو مقدار به عنوان طول توقف، هر دو نقطه شروع و پایان آن را تعریف می کنید:

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

مقدار خروجی 0.25 از 25% تا 75% در زمان استفاده خواهد شد.

ایجاد منحنی های پیچیده با خطی()

در حالی که مثال‌های بالا ساده‌سازی‌های بسیار ساده هستند، می‌توانید از linear() برای بازسازی توابع easing پیچیده به روشی بسیار ساده و بدون از دست دادن مقداری دقت استفاده کنید.

این منحنی کاهش جهش را در نظر بگیرید، نوعی کاهش که نمی‌تواند مستقیماً در 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;
}

اگرچه ممکن است کد چیز زیادی به شما نگوید، تجسم ممکن است. این خروجی است که به صورت یک منحنی آبی تجسم شده است:

منحنی را می توان با اضافه کردن تعدادی توقف بر روی آن ساده کرد. در اینجا، هر نقطه سبز نشان دهنده یک توقف است:

هنگامی که به linear() منتقل می شود، نتیجه منحنی است که به نظر شبیه منحنی اصلی است، اما در لبه ها کمی خشن تر است.

جعبه متحرک سبز را با جعبه آبی مقایسه کنید، می توانید متوجه شوید که آنقدر هم صاف نیست.

اما، اگر توقف های کافی اضافه کنید، می توانید منحنی اصلی را به خوبی تقریب بزنید. در اینجا یک نسخه به روز شده است:

با دوبرابر کردن تعداد توقف‌ها، از قبل نتیجه‌ای صاف دریافت می‌کنید.

کد مورد استفاده برای متحرک سازی به صورت زیر است:

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() تبدیل کنید .

این ابزار یک تابع easing جاوا اسکریپت یا منحنی SVG را به عنوان ورودی خود می گیرد و منحنی ساده شده را با استفاده از linear() خروجی می گیرد. از لغزنده ها برای کنترل تعداد توقف های مورد نظر و دقت آنها استفاده کنید.

در بالا سمت راست، می‌توانید یکی از پیش‌تنظیم‌ها را نیز انتخاب کنید: بهار، Bounce، Simple elastic، یا Material Design تاکید شده است.

پشتیبانی DevTools

موجود در DevTools از تجسم و ویرایش نتیجه linear() پشتیبانی می کند. روی نماد کلیک کنید تا یک ابزار تعاملی نشان داده شود که به شما امکان می دهد نقاط را در اطراف بکشید.

این ویژگی DevTools در DevTools که با Chrome 114 ارسال می‌شود در دسترس است.

عکس توسط Howie Mapson در Unsplash