Ключові моменти
- 01Тягніть дві контрольні точки ручок, щоб скульптувати криву затухання візуально, а не здогадці числові значення.
- 02Жива анімація кулі програє синхронізацію, так що ви можете почути рух перед комітуванням.
- 03Усі п'ять вбудованих CSS наборів (ease, linear, ease-in, ease-out, ease-in-out) доступні як початкові точки.
- 04Значення cubic-bezier() оновлюється у режимі реального часу з двома десятковою точністю, готовою для вставлення у будь-яке CSS властивість.
Чому користувальницькі дуги затухання мають значення для движення ІП
Вбудовані CSS функції синхронізації — ease, ease-in-out, linear — охоплюють багато площ, але кожна ІП має моменти, де стандартна відчувається трохи неправильно. Підказка, яка з'являється занадто різко, модаль, яка перекриває на відкритті, рядок прогресу, який відчувається механічним. Дуги Cubic-bezier дозволяють вам налаштувати рух, щоб він відчувався природним, а не механічним, але чотири числа в cubic-bezier(0.4, 0, 0.2, 1) майже неможливо розумно розуміти безпосередньо.
Cubic-bezier editor від Handytool перетворює ці числа на візуальну криву з двома перетягуватися ручками. Перемістіть ручку і анімація кулі грає назад одразу, тому ви можете повторити по відчуттю, поки рух не відповідає вашому наміру. Потім скопіюйте значення та відкиньте його у ваш CSS — готово.
Як проектувати криву затухання CSS
- 01
Почніть з набір
Виберіть ease, linear, ease-in, ease-out або ease-in-out як базову лінію. Ручки привʻязуються до правильних позицій для кожного набір.
- 02
Тягніть контрольні точки ручок
Кожна ручка контролює один кінець кривої — ручка початку формує початкове прискорення, ручка кінця формує заключне уповільнення. Переміщення ручки переключає набір на 'custom' автоматично.
- 03
Дивіться анімацію кулі
Куля анімує зліва направо, використовуючи вашу криву. Відрегулюйте повзунок тривалості, щоб переглянути повільні проти швидких переходів.
- 04
Експериментуйте з перекриттям
Тягніть ручку осі Y вище 1 або нижче 0, щоб створити перекриття та недостатне — 'bouncy' ефект, який робить меню відкритим енергійно.
- 05
Копіюйте значення CSS
Натисніть Copy, щоб взяти рядок cubic-bezier() та вставити його в transition-timing-function або animation-timing-function у вашому стилішті.
Запускається повністю у вашому браузері
Editor — це самостійний інструмент браузера — немає шрифтів, немає скриптів та немає даних завантажуються після сторінка відкривається. Тягнення ручок та анімація тиражування функцій офлайн. Формула cubic-bezier, яка використовується для кулі перегляду, такий же як той, який браузери використовують для CSS переходів, тому що ви бачите в editor є саме те, що ваш стильний лист буде виробляти.
Не потрібно встановлювати та нічого реєструватися. Вихід — це одне значення CSS — вставте його і ви готові.
Cubic-Bezier Editor FAQ
Що таке cubic-bezier дуга затухання?
Це математична крива, визначена двома контрольними точками, що визначає, як CSS перехід або анімація прискорює z часу. Чотири числа в cubic-bezier(x1, y1, x2, y2) встановлюють позиції тих контрольних точок.
Чому можуть значення Y піти вище 1 або нижче 0?
Значення Y поза 0–1 виробляють перекриття та недостатне — крива перейде своєї кінцевої точки перед розселенням. Це створює 'bouncy' дуги затухання. Значення X повинні залишатися в 0–1.
Як я використовую вихід?
Скопіюйте рядок cubic-bezier(...) та вставте його в будь-яке значення CSS transition-timing-function або animation-timing-function. Це працює в кожному сучасному браузері.
Що means ease-in-out насправді означає?
Ease-in-out починається повільно, прискорює в середині та уповільнює в кінці — cubic-bezier(0.42, 0, 0.58, 1). Це дзеркало того, як реальні об'єкти прискорюються та уповільнюються та є стандартним вибором для більшості відполірованого рухомого ІП.
Чи точна анімація кулі перегляду до CSS?
Так — перегляд використовує ту ж формулу cubic bezier браузери застосовують до CSS переходів. Повзунок тривалості дозволяє вам відчути повільне проти швидких кривих перед комітуванням.