مولد تابع زمان‌بندی مکعبی بزیه

این ابزار چه کاری انجام می‌دهد

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

نحوه استفاده

• دستگیرهٔ آبی (کنترل‌کنندهٔ شروع حرکت) و دستگیرهٔ مرجانی (کنترل‌کنندهٔ پایان حرکت) را بکشید تا شکل منحنی تغییر کند.
• یا اگر مقادیر موردنظرتان را می‌دانید، مقادیر دقیق x1/y1/x2/y2 را مستقیماً وارد کنید.
• کلیک کنید پخش پیش‌نمایش تا حرکت توپ را با استفاده از منحنی دقیق شما روی مسیر ببینید و با تنظیم نوار لغزندهٔ مدت‌زمان، سرعت آن را با سرعت واقعی انیمیشن‌تان هماهنگ کنید.
• یک پیش‌تنظیم نام‌گذاری‌شده را امتحان کنید — کلیدواژه‌های استانداردی مانند ease-in-out، به‌علاوهٔ منحنی‌های دارای بیش‌جهش مانند ease-out-back and steep curves like ease-in-expo — به‌عنوان نقطه شروع، سپس از همان‌جا آن را دقیق‌تر تنظیم کنید.
• آماده برای کپی transition-timing-function / animation-timing-function CSS از کادر خروجی.

موارد استفاده در دنیای واقعی

• ایجاد یک جهش جزئی «بیش‌جهش» هنگام ورود یک پنجرهٔ مودال یا منوی کشویی، با استفاده از منحنی‌ای به سبک ease-out-back.
• تطبیق یک منحنی easing سفارشی از یک انیمیشن Lottie یا مشخصات حرکتِ ابزار طراحی.
• افزایش سرعت شروع یک انتقال hover برای واکنش‌پذیرتر شدن آن، بدون تغییر مدت‌زمان کلی.
• ایجاد حس حرکتی منحصربه‌فرد و هماهنگ با هویت برند، به‌جای تکیه بر همان چند کلیدواژهٔ پیش‌فرض easing که همهٔ سایت‌ها استفاده می‌کنند.

سؤالات متداول

x1، y1، x2 و y2 دقیقاً چه چیزی را کنترل می‌کنند؟

این‌ها دو نقطهٔ کنترل یک منحنی مکعبی بزیه هستند که بین نقطهٔ شروع ثابت (0,0) و نقطهٔ پایان (1,1) رسم شده‌اند. مقدارهای x باید بین 0 و 1 بمانند (زمان نمی‌تواند به عقب برگردد)، اما y می‌تواند کمتر از 0 یا بیشتر از 1 باشد؛ همین موضوع افکت‌های «بیش‌جهش» را ایجاد می‌کند، مانند منحنی‌ای که پیش از حرکت رو به جلو و رسیدن به حالت نهایی، کمی به عقب برمی‌گردد.

چرا منحنی من از نقطهٔ پایان عبور می‌کند؟

این اتفاق زمانی رخ می‌دهد که مقدار y یک نقطهٔ کنترل از 1 بیشتر یا از 0 کمتر شود — این یک باگ نیست؛ همین ویژگی افکت‌هایی مانند ease-out-back، که در آن یک عنصر پیش از قرار گرفتن در موقعیت نهایی، اندکی از آن عبور می‌کند و سپس آرام می‌گیرد؛ مشابه عملکرد یک فنر.

تفاوت بین transition-timing-function و animation-timing-function چیست؟

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

آیا cubic-bezier() می‌تواند حالتی جهشی مانند افتادن یک توپ ایجاد کند؟

این یک افکت چندجهشی واقعی نیست — یک منحنی cubic-bezier() فقط می‌تواند یک بار بیش‌جهش داشته باشد. برای ایجاد چند جهش واقع‌گرایانه به چند مرحلهٔ keyframe نیاز است. بااین‌حال، منحنی‌های تک‌جهشی مانند پیش‌تنظیم‌های back و سبک elastic در این ابزار، تقریباً بیشتر کاربردهای واقعی «جهش» در رابط کاربری را پوشش می‌دهند.