ساختار و عملکرد منحنیهای شتابدهی در CSS
در طراحی رابطهای کاربری وب، انتقالها (transitions) و پویانماییها (animations) نقش مهمی در بهبود تجربه کاربری ایفا میکنند. ابزار «سازنده CSS Cubic Bezier» به شما این امکان را میدهد که به صورت بصری یک منحنی شتابدهی (easing curve) اختصاصی را با کشیدن دو نقطه کنترل طراحی کنید. همزمان با تغییر شکل منحنی، حرکت یک نقطه روی آن در مقایسه با حرکت یکنواخت و خطی یک نقطه دیگر به نمایش درمیآید تا بتوانید سرعت و نحوه پیشرفت پویانمایی را ارزیابی کنید. در نهایت، این ابزار مقدار دقیق تابع cubic-bezier() را برای استفاده مستقیم در کدهای CSS تولید میکند.
منحنی شتابدهی از نقطه پایین-چپ (شروع پویانمایی در زمان صفر و پیشرفت صفر) آغاز شده و به نقطه بالا-راست (پایان پویانمایی در زمان ۱۰۰٪ و پیشرفت ۱۰۰٪) ختم میشود. در این نمودار، محور افقی نشاندهنده گذر زمان از چپ به راست و محور عمودی نشاندهنده میزان پیشرفت پویانمایی به سمت بالا است. با جابهجا کردن دو دستگیره کنترل، شتاب پویانمایی در طول زمان تغییر میکند.
ورودیها و پارامترهای تنظیم منحنی
برای شکلدهی به منحنی شتابدهی، ابزار از دو روش تعاملی و عددی پشتیبانی میکند:
- کشیدن دو دستگیره: با جابهجایی بصری این نقاط روی صفحه، شکل منحنی تغییر میکند.
- نقطه کنترل اول (X و Y): مختصات نقطه کنترل اول که مقدار X آن باید بین 0 و 1 و مقدار Y آن بین -0.70 و 1.70 قرار گیرد.
- نقطه کنترل دوم (X و Y): مختصات نقطه کنترل دوم که مقدار X آن بین 0 و 1 و مقدار Y آن بین -0.70 و 1.70 محدود است.
- انتخاب پیشفرضها: امکان انتخاب سریع از میان گزینههای استاندارد مانند "ease" ،"ease-in" ،"ease-out" ،"ease-in-out" و گزینههای پیشرفتهتر شامل "برگشت به داخل (Back In)" ،"برگشت به خارج (Back Out)" یا "برگشت به داخل و خارج (Back In-Out)".
خروجیهای ابزار
پس از تنظیم دستگیرهها یا وارد کردن مقادیر عددی، ابزار خروجیهای زیر را ارائه میدهد:
- منحنی شما: نمایش بصری منحنی شتابدهی طراحیشده که مسیر حرکت و تغییرات سرعت را نشان میدهد.
- cubic-bezier(x1, y1, x2, y2): فرمول ریاضی نهایی و معتبر CSS که مستقیماً از روی مختصات نقاط کنترل محاسبه میشود.
- Copied: وضعیتی که پس از کپی کردن موفقیتآمیز مقدار تابع در حافظه موقت سیستم (Clipboard) به نمایش درمیآید.
قوانین ریاضی و رفتارهای خاص ابزار
برای تضمین صحت کدهای CSS تولیدشده، قوانین و محدودیتهای ریاضی مشخصی بر رفتار ابزار حاکم است:
- محدوده محور زمان (X): مقادیر X برای هر دو نقطه کنترل همواره باید بین 0 و 1 باقی بمانند. زمان نمیتواند به عقب بازگردد یا از محدوده پویانمایی فراتر رود. اگر مقداری خارج از این محدوده (مثلاً عدد
9) را در فیلد X وارد کنید و تمرکز (Focus) را از روی فیلد بردارید، مقدار به طور خودکار به سقف مجاز یعنی1تغییر مییابد. - محدوده محور پیشرفت (Y): مقادیر Y میتوانند فراتر از محدوده استاندارد رفته و بین -0.70 و 1.70 تنظیم شوند. این ویژگی اجازه میدهد که پویانمایی قبل از شروع واقعی کمی به عقب برود (pull-back) یا در انتها از نقطه پایانی خود فراتر رفته و سپس به جای خود بازگردد (overshoot).
- بازگردانی مقادیر نامعتبر: در صورتی که یک فیلد عددی را کاملاً خالی کنید و تمرکز را از روی آن بردارید، ابزار آخرین مقدار معتبر قبلی را بازیابی میکند. فیلدهای خالی یا غیرعددی تا زمان وارد کردن یک مقدار کامل و صحیح منتظر میمانند.
- کنترل دقیق با کیبورد: هنگام تمرکز روی دستگیرههای کنترل، فشردن کلید جهتنمای چپ مقدار را به صورت جزئی کاهش میدهد (به عنوان مثال به
0.99میرساند). - پیشفرض برگشت به خارج (Back Out): انتخاب این گزینه، مقدار تابع را دقیقاً روی
cubic-bezier(0.34, 1.56, 0.64, 1)تنظیم میکند که یک افکت پرش اضافی استاندارد ایجاد میکند. - محدودیت فیزیکی منحنی: یک تابع
cubic-bezierمنفرد میتواند افکتهای پیشبینی حرکت و پرش اضافی را شبیهسازی کند، اما حرکت آن همواره در یک جهت کلی پیش میرود و سپس ثابت میشود. این تابع نمیتواند رفتارهای نوسانی چندباره مانند افکتهای ارتجاعی (bounce) یا کشسانی (elastic) که جهت حرکت را چندین بار معکوس میکنند، توصیف کند.
حریم خصوصی و پردازش دادهها
تمام محاسبات ریاضی، ترسیم منحنیها و شبیهسازی حرکتی به طور کامل درون مرورگر وب شما انجام میشود. هیچیک از تنظیمات، مختصات یا مقادیر واردشده در این ابزار به سرورهای BroBroGo آپلود نخواهد شد و فرآیند پردازش کاملاً محلی است.
پرسشهای متداول
دو دستگیره و چهار عدد به چه معنا هستند؟
منحنی از پایین-چپ (شروع) به بالا-راست (پایان) حرکت میکند، به طوری که زمان از چپ به راست و پیشرفت به سمت بالا حرکت میکند. دو دستگیره، نقاط کنترلی هستند که آن را خم میکنند — هر کدام دارای یک X و یک Y هستند، بنابراین با هم فرمول cubic-bezier(x1, y1, x2, y2) را تشکیل میدهند. مقدار X بین ۰ و ۱ باقی میماند، در حالی که Y میتواند بالاتر از سقف یا پایینتر از کف برود تا حرکت قبل از سکون، دچار پرش اضافی یا عقبگرد شود.
چگونه از این مقدار در CSS خود استفاده کنم؟
مقدار cubic-bezier() را کپی کنید و در هر جایی که تابع زمانبندی (timing function) قرار میگیرد قرار دهید — مانند transition-timing-function، animation-timing-function یا به صورت مختصر، برای مثال: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). کلمات کلیدی ease، ease-in، ease-out و ease-in-out صرفاً منحنیهای ثابت cubic-bezier هستند، بنابراین انتخاب هر یک از این پیشفرضها مقدار دقیق پشت آن کلمه کلیدی را به شما نشان میدهد.
آیا میتوان با آن افکت ارتجاعی (bounce) یا کشسانی ایجاد کرد؟
به تنهایی خیر. یک cubic-bezier منفرد میتواند حالت پیشبینی و پرش اضافی (overshoot) داشته باشد — پیشفرضهای "back" با کشیدن یکی از دستگیرهها به خارج از کادر دقیقاً همین کار را میکنند — اما فقط میتواند در یک جهت حرکت کند و سپس متوقف شود. افکتهای ارتجاعی (bounce) و کشسانی (elastic) جهت حرکت را چندین بار معکوس میکنند که هیچ منحنی cubic-bezier منفردی نمیتواند آن را توصیف کند؛ برای این کارها به فریمهای کلیدی (keyframes) در CSS یا تابع linear() با چندین گام نیاز دارید.