نکات کلیدی
- 01دو دسته کنترل را بکشید برای شکلدهی بصری به منحنی تسهیل نسبت به حدس مقادیر عددی.
- 02انیمیشن توپ زنده توقفی بازی میکند تا احساس کار قبل از تعهد به آن را داشته باشید.
- 03تمام پنج تنظیم CSS پیشنویس (ease، linear، ease-in، ease-out، ease-in-out) به عنوان نقاط شروع در دسترس هستند.
- 04مقدار cubic-bezier() با دقت دو دهدهی زنده بهروزرسانی میشود، برای چسباندن در هر ویژگی CSS آماده.
چرا منحنیهای تسهیل سفارشی برای حرکت UI مهم است
عملکردهای زمانبندی CSS — ease، ease-in-out، linear — زمین بسیاری را پوشش میدهند، اما هر UI نوپ دارد جایی که پیشفرض احساس کمی اشتباه است. نکتهای که بسیار تند ظاهر میشود، modal که بر روی باز بیشازحد پرتاب میشود، نوار پیشرفت که مکانیکی احساس میشود. منحنیهای Cubic-bezier به شما اجازه میدهد حرکت را برای احساس طبیعی تقسیم کنید نه مکانیکی، اما چهار عدد در cubic-bezier(0.4, 0, 0.2, 1) تقریباً غیرممکن برای درک مستقیم است.
ویرایشگر cubic-bezier از Handytool آن اعداد را به منحنی بصری با دو دسته قابل کشیدگی تبدیل میکند. دسته را حرکت دهید و انیمیشن توپ فوری بازی میشود، بنابراین میتواند تکرار شود احساسکند تا زمانی که حرکت قصد شما را تطابق دهد. سپس مقدار را کپی کنید و آن را CSS خود بریزید — انجام شده.
نحوه طراحی منحنی تسهیل CSS
- 01
از یک تنظیم شروع کنید
ease، linear، ease-in، ease-out، یا ease-in-out را به عنوان بنیاد انتخاب کنید. دستهها به موقعیتهای صحیح برای هر تنظیم عصبی میشوند.
- 02
دستههای نقطة کنترل را بکشید
هر دسته یک انتهای منحنی را کنترل میکند — دسته شروع شکلدهی شتاب اولیه، دسته نهایی شکلدهی کاهش نهایی. کشیدن دسته خودکار تنظیم را برای 'سفارشی' تغییر میدهد.
- 03
انیمیشن توپ را ببینید
توپ از چپ به راست با استفاده از منحنی شما انیمیشن میکند. لغزشگر مدت را برای پیشنمایش انتقال کند در مقابل سریع تنظیم کنید.
- 04
با بیشازحد تجربه کنید
دسته محور Y را بر روی 1 یا زیر 0 بکشید تا بیشازحد و کمبیشازحد ایجاد کنید — اثر 'جسورانه' که منوای را باز میکند به انرژی.
- 05
مقدار CSS را کپی کنید
برای گرفتن رشتة cubic-bezier() کلیک کنید Copy و آن را در transition-timing-function یا animation-timing-function در شیوه نامة خود بچسبانید.
به طور کامل در مرورگر شما اجرا میشود
ویرایشگر یک ابزار مرورگر خودمختار است — بدون فونت، بدون اسکریپت، و بدون داده پس از باز شدن صفحه بارگیری میشود. کشیدن دستهها و انیمیشنهای پیشنمایش به صورت آفلاین کار میکند. فرمول cubic-bezier برای توپ پیشنمایش همان است که مرورگرها برای انتقال CSS استفاده میکنند، بنابراین آنچه در ویرایشگر میبینید دقیقاً آنچه شیوه نامة شما تولید خواهد کرد.
بدون نصب و بدون ثبتنام چیزی نیست. خروجی یک مقدار CSS واحد است — بچسبانید و تمام شده.
پرسشهای متداول ویرایشگر Cubic-Bezier
منحنی تسهیل cubic-bezier چیست؟
این منحنی ریاضی است که توسط دو نقطة کنترل تعریف میشود که تعیین میکند انتقال CSS یا انیمیشن چگونه در طول زمان شتاب میگیرد. چهار عدد در cubic-bezier(x1, y1, x2, y2) موقعیتهای آن نقاط کنترل را تنظیم میکند.
چرا مقادیر Y میتوانند بر روی 1 یا زیر 0 برروند؟
مقادیر Y خارج 0–1 بیشازحد و کمبیشازحد تولید میکنند — منحنی فراتر از نقطة پایانی خود میرود قبل از تسویه. این 'جسورانه' تسهیل ایجاد میکند. مقادیر X در 0–1 باید بمانند.
چگونه از خروجی استفاده کنم؟
رشتة cubic-bezier(...) را کپی کنید و آن را در هر مقدار transition-timing-function یا animation-timing-function CSS بچسبانید. در هر مرورگر مدرن کار میکند.
ease-in-out واقعاً به چه معنی است؟
Ease-in-out آهسته شروع میشود، در وسط شتاب میگیرد، و در انتها آهسته میشود — cubic-bezier(0.42, 0, 0.58, 1). نحوة شیهای واقعی شتاب و کاهش را بازتاب میدهد و انتخاب پیشفرض برای اکثر حرکت UI پالیششده است.
آیا پیشنمایش انیمیشن توپ دقیق CSS است؟
بله — پیشنمایش از فرمول cubic bezier مشابهی است که مرورگرها برای انتقال CSS اعمال میکنند. لغزشگر مدت شما به احساس منحنی کند در مقابل سریع اجازه میدهد قبل از تعهد.