Easing Functions (Изинги)
Easing функции - это математические формулы, которые определяют скорость изменения параметра. В основе лежит преобразование линейного входного значения t в диапазоне [0,1] в нелинейное выходное значение согласно формуле.
Зачем это нужно
Изинги позволяют уйти от «роботизированного» линейного движения, добавляя инерцию, ускорение, плавность или предают живой вид изображению.
Сферы применения
- Web & Frontend: Анимация появления элементов, плавный скролл, переходы(Transitions).
- UI/UX: Отклик интерфейса на действия пользователя (нажатия, выплывающие меню).
- Системы частиц: Изменение размера, прозрачности или скорости партиклов.
- Обработка изображений: Плавные градиенты, маски, процедурная генерация.
Полезные ресурсы
Для подбора кривых и визуализации удобно использовать:
- easings.net полная библиотека основных функций с примерами на CSS/JS, сопровождающаяся иллюстрациями. Рекомендую.
- Сeaser простой, наглядный инструмент для генерации кастомной cubic-bezier функции для веб-разработки.
Реализация для Unity (Swift FX - Easing Graph)
Для тех, кто работает с визуальными эффектами в Unity, я собрал Easing Graph. Это библиотека, которая интегрирует все популярные функции изинга напрямую в Shader Graph и VFX Graph. Доступная бесплатно для подписчиков канала.
Она позволяет избегать нагромождения стандартных узлов и быстро настраивать динамику материалов или поведение частиц через одну ноду.
Ссылка на проект: SwiftXF
CheatSheet: Базовые Easing функции
- Linear: Равномерное движение.
- Ease In: Медленный старт, ускорение в конце (разгон).
- Ease Out: Быстрый старт, замедление в конце (торможение).
- Ease In Out: Плавное ускорение в начале и замедление в конце.
- Elastic/Bounce: Эффекты пружины или отскока (!результат выходит за пределы 0-1).
easing
web
unity
gamedev
frontend
