ساخت cubic-bezier برای CSS

هر transition و animation در CSS یک تابع زمان‌بندی دارد که تعیین می‌کند حرکت چطور پیش برود: آرام شروع شود و تند تمام شود، از مقصد رد شود و برگردد، یا با سرعت ثابت حرکت کند. کلیدواژه‌های آماده مثل ease-in-out در واقع چیزی جز منحنی‌های cubic-bezier() با اعداد ثابت نیستند. این ابزار رایگان اجازه می‌دهد منحنی خودت را بکشی، نتیجه را زنده ببینی و کد نهایی را کپی کنی.

چطور کار می‌کند؟

1. دستگیره آبی (کنترل شروع حرکت) و دستگیره مرجانی (کنترل پایان حرکت) را بکش تا شکل منحنی عوض شود.
2. یا اگر مقادیر دقیق را می‌دانی، مستقیم در فیلدهای x1، y1، x2 و y2 وارد کن.
3. روی پخش بزن تا حرکت را با همان منحنی ببینی؛ با اسلایدر مدت‌زمان هم می‌توانی سرعت را با انیمیشن واقعی پروژه‌ات هماهنگ کنی.
4. یکی از پیش‌تنظیم‌های آماده را به‌عنوان نقطه شروع بردار و از همان‌جا تنظیمش کن.
5. کد transition-timing-function یا animation-timing-function را از کادر خروجی کپی کن.

مقادیر x و y یعنی چه؟

این چهار عدد، مختصات دو نقطه کنترل منحنی هستند؛ منحنی همیشه از نقطه ثابت (0,0) شروع و در (1,1) تمام می‌شود. مقادیر x باید بین ۰ و ۱ بمانند، چون زمان نمی‌تواند به عقب برگردد. اما y می‌تواند کمتر از ۰ یا بیشتر از ۱ باشد — و همین است که افکت‌های جهشی می‌سازد، یعنی حالتی که عنصر کمی از مقصد رد می‌شود و بعد برمی‌گردد.

چرا منحنی من از خط بالا رد می‌شود؟

این باگ نیست، بلکه دقیقاً همان چیزی است که افکت‌هایی مثل ease-out-back را می‌سازد. وقتی مقدار y از ۱ بیشتر شود، عنصر قبل از نشستن در جای نهایی کمی جلوتر می‌رود و بعد برمی‌گردد — شبیه رفتار یک فنر. همین حس ظریف است که یک انیمیشن را از حالت مکانیکی درمی‌آورد.

transition یا animation؟

هر دو دقیقاً همان مقدار cubic-bezier() را می‌پذیرند. transition-timing-function برای transitionها استفاده می‌شود، یعنی تغییر حالت‌هایی مثل hover و focus. animation-timing-function برای انیمیشن‌های @keyframes به کار می‌رود. کادر خروجی هر دو را به تو می‌دهد تا هرکدام را که لازم داری برداری.

می‌شود افکت جهش توپ ساخت؟

نه به‌طور کامل. یک منحنی cubic-bezier() فقط می‌تواند یک بار از مقصد رد شود، پس برای جهش‌های