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

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

Bramus

آسان‌سازی‌ها در CSS

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

There are several keywords available as presets in CSS, namely linear , ease , ease-in , ease-out , and ease-in-out . To create your own easing curves use the cubic-bezier() function, or take a steps based approach using the steps() easing function.

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

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

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

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

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

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

نمودار مربوط به 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);

مقدار خروجی ۰.۲۵ از ۲۵٪ تا ۷۵٪ در زمان استفاده خواهد شد.

ایجاد منحنی‌های پیچیده

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

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

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

وقتی به 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() خروجی می‌دهد. از اسلایدرها برای کنترل تعداد نقاط مورد نظر و دقت آنها استفاده کنید.

در بالا سمت راست، می‌توانید یکی از تنظیمات از پیش تعیین‌شده را نیز انتخاب کنید: Spring (بهار)، Bounce (پرش)، Simple elastic (کشسان ساده) یا Material Design (طراحی متریال با تأکید بر آسان‌سازی).

پشتیبانی از ابزارهای توسعه (DevTools)

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

این ویژگی DevTools در DevTools از کروم ۱۱۴ موجود است.