ویرایشگر شتابگیری منحنی بزیه مکعبی
منحنیهای شتابگیری cubic-bezier سفارشی با ویرایشگر قابلکشیدن و پیشنمایش زنده انیمیشن طراحی کنید.
دو دستگیره را بکشید تا منحنی شتابگیری را شکل دهید.
transition-timing-function: —;
animation-timing-function: —;
همه چیز در مرورگر شما اجرا میشود — چیزی آپلود نمیشود.
درباره ویرایشگر شتابگیری منحنی بزیه مکعبی
ویرایشگر ایزینگ Cubic-Bézier توابع زمانبندی سفارشی برای انتقالها و انیمیشنهای CSS طراحی میکند. دو دستگیرهٔ کنترل روی بوم منحنی را بکشید و مقدار cubic-bezier(x1, y1, x2, y2) زنده بهروزرسانی میشود؛ یک پیشنمایش انیمیشن ایزینگ را در کنار یک مرجع خطی پخش میکند تا تفاوت را احساس کنید، با مدتزمان قابل تنظیم و پخش مجدد فوری.
ده پیشتنظیم واژگان رایج را پوشش میدهند — ease استاندارد، ease-in، ease-out و ease-in-out، بههمراه منحنیهای بیانگری مانند back و anticipate که از نقاط پایانی خود فراتر میروند، و شیبهای سبک متریال accelerate و decelerate. از آنها همانطور که هستند استفاده کنید یا بهعنوان نقطهٔ شروعی برای کشیدن به سمت چیزی از خودتان.
همچنین میتوانید مختصات دقیق نقاط کنترل را تایپ کنید، برای الهام روی randomize بزنید، و مقدار خالص cubic-bezier() یا یک قاعدهٔ CSS آماده برای جایگذاری را کپی کنید. کل ویرایشگر در مرورگر شما اجرا میشود.
نحوه استفاده از ویرایشگر شتابگیری منحنی بزیه مکعبی
- دو دستگیره را روی ویرایشگر منحنی بکشید تا ایزینگ را شکل دهید.
- روی Replay کلیک کنید و انیمیشن ایزینگشده را با مرجع خطی مقایسه کنید، و در صورت نیاز مدتزمان را تنظیم کنید.
- پیشتنظیمها را امتحان کنید — ease، back، anticipate، material و بیشتر — برای یک نقطهٔ شروع سریع.
- با ورودیهای عددی نقطهٔ کنترل برای مقادیر دقیق ظرافتکاری کنید.
- مقدار cubic-bezier() یا کل قطعهٔ CSS را کپی کنید.