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

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

براموس

تسهیلات در 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()

پشتیبانی مرورگر

  • کروم: 113.
  • لبه: 113.
  • فایرفاکس: 112.
  • سافاری: 17.2.

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

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

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

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

تجسم نمودار خطی (0، 0.25، 1).

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

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

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

تجسم نمودار خطی (0، 0.25 75٪، 1).

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

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

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

تجسم نمودار خطی (0, 0.25 25% 75%, 1).

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

در حالی که مثال‌های بالا ساده‌سازی‌های بسیار ساده هستند، می‌توانید از 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() تبدیل کنید .

تصویری از ابزار مولد آسان سازی خطی.
اسکرین شات https://linear-easing-generator.netlify.app/ در حال عمل.

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

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

پشتیبانی DevTools

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

تصویری از ویرایشگر «خطی()» Chrome DevTools.
تصویری از ویرایشگر «خطی()» Chrome DevTools.

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

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

،

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

براموس

تسهیلات در 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()

پشتیبانی مرورگر

  • کروم: 113.
  • لبه: 113.
  • فایرفاکس: 112.
  • سافاری: 17.2.

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

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

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

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

تجسم نمودار خطی (0، 0.25، 1).

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

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

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

تجسم نمودار خطی (0، 0.25 75٪، 1).

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

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

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

تجسم نمودار خطی (0, 0.25 25% 75%, 1).

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

در حالی که مثال‌های بالا ساده‌سازی‌های بسیار ساده هستند، می‌توانید از 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() تبدیل کنید .

تصویری از ابزار مولد آسان سازی خطی.
اسکرین شات https://linear-easing-generator.netlify.app/ در حال عمل.

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

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

پشتیبانی DevTools

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

تصویری از ویرایشگر «خطی()» Chrome DevTools.
تصویری از ویرایشگر «خطی()» Chrome DevTools.

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

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