Основные выводы
- 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 Handytool превращает эти числа в визуальную кривую с двумя перетаскиваемыми точками. Переместите точку и анимация шара воспроизведется немедленно, чтобы вы могли повторять попытки на ощупь, пока движение не совпадет с вашим намерением. Затем скопируйте значение и разместите его в своем CSS — готово.
Как создать кривую плавности CSS
- 01
Начните с предустановки
Выберите ease, linear, ease-in, ease-out или ease-in-out в качестве базовой линии. Точки управления привязываются к правильным позициям для каждой предустановки.
- 02
Перетаскивайте контрольные точки
Каждая точка управляет одним концом кривой — начальная точка формирует начальное ускорение, конечная точка формирует финальное замедление. Перемещение точки автоматически переключает предустановку на 'пользовательскую'.
- 03
Смотрите анимацию шара
Шар анимируется слева направо, используя вашу кривую. Отрегулируйте ползунок длительности, чтобы просмотреть медленные и быстрые переходы.
- 04
Экспериментируйте с избытком
Перетаскивайте точку оси Y выше 1 или ниже 0, чтобы создать избыток и недостаток — эффект 'пружины', который заставляет меню открываться энергично.
- 05
Скопируйте значение CSS
Нажмите Копировать, чтобы получить строку cubic-bezier() и вставьте её в 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(...) и вставьте её в любое значение CSS transition-timing-function или animation-timing-function. Это работает во всех современных браузерах.
Что на самом деле означает ease-in-out?
Ease-in-out начинается медленно, ускоряется в середине и замедляется в конце — cubic-bezier(0.42, 0, 0.58, 1). Это отражает то, как реальные объекты ускоряются и замедляются, и это выбор по умолчанию для большинства отполированного движения пользовательского интерфейса.
Является ли предпросмотр анимации шара точным для CSS?
Да — предпросмотр использует ту же формулу cubic bezier, которую применяют браузеры к CSS-переходам. Ползунок длительности позволяет вам почувствовать медленные и быстрые кривые перед тем, как их завершить.