Встроенное линейное сглаживание представляет собой самый простой
режим изменения значения во времени. В Velocity.js оно обозначается как
linear и характеризуется постоянной скоростью изменения
анимационного параметра без ускорений и замедлений.
Такой режим применяется там, где требуется предсказуемое и равномерное движение: перемещение элементов по координатам, равномерное изменение прозрачности или масштабирование без визуальных акцентов.
Ключевая особенность линейного режима — отсутствие производной второго порядка: скорость не изменяется на протяжении всей анимации, что делает поведение максимально механистичным и строгим.
Базовый набор встроенных функций включает семейство easing-кривых, имитирующих естественное ускорение и замедление движения. Наиболее часто используемые варианты:
swingeaseease-inease-outease-in-outФункция swing часто используется как значение по
умолчанию и задаёт мягкое нелинейное поведение, при котором движение
начинается и заканчивается плавнее, чем в середине.
Характеризуется медленным стартом и постепенным увеличением скорости. Подходит для появления элементов интерфейса, когда требуется эффект «разгона».
Обратная логика: быстрое начало с последующим замедлением. Используется для исчезновения элементов или завершения движения с визуальным «затуханием».
Комбинированная кривая, в которой присутствуют обе фазы — ускорение в начале и замедление в конце. Такой режим воспринимается наиболее естественно для большинства UI-анимаций.
Все стандартные кривые Velocity.js основаны на математическом описании изменения скорости через нелинейные функции. В отличие от линейной интерполяции, здесь учитывается не только текущее положение объекта, но и его динамика в рамках временного интервала.
Это позволяет формировать визуально «живое» движение, где каждый кадр анимации имеет отличающуюся производную изменения параметра.
Одним из наиболее гибких встроенных механизмов являются кривые Безье, задаваемые массивом из четырёх чисел:
[cx1, cy1, cx2, cy2]Такая форма позволяет полностью контролировать характер ускорения и замедления движения.
Кубическая кривая интерпретируется как параметрическая функция, где два контрольных узла определяют форму траектории изменения скорости. Это даёт возможность моделировать практически любые сценарии поведения анимации — от мягких органических переходов до резких импульсных движений.
Пример использования:
easing: [0.17, 0.67, 0.83, 0.67]При таких значениях кривая приобретает выраженную S-образную форму, создавая эффект динамичного старта и плавного завершения.
Velocity.js включает режим, основанный на физической модели пружинного движения. В этом случае анимация описывается не статической функцией времени, а системой параметров, имитирующих поведение упругого тела:
Такое поведение позволяет добиться эффекта инерции, колебаний и возвратного движения.
Пружинная модель особенно полезна для интерфейсных элементов, где требуется ощущение физического взаимодействия: модальные окна, перетаскиваемые объекты, интерактивные панели.
Характер движения определяется балансом параметров:
Некоторые easing-значения поддерживают альтернативные формы записи, обеспечивая совместимость с другими библиотеками и стилями описания анимаций.
Например, различные вариации записи одного и того же поведения могут приводиться к единой внутренней реализации. Это снижает фрагментацию кода и упрощает перенос анимационной логики между проектами.
В Velocity.js допускается комбинирование различных типов easing в рамках одной системы анимации. Это позволяет выстраивать сложные сценарии поведения, где разные этапы движения имеют независимую динамику.
Типичный подход включает:
Такое комбинирование формирует многоступенчатую динамику, приближенную к реальным физическим процессам.
Разные типы встроенной плавности используются в зависимости от роли элемента в интерфейсе. Анимации появления требуют одной модели поведения, взаимодействие пользователя — другой, а системные переходы — третьей.
С точки зрения визуального восприятия:
Такое разделение позволяет управлять вниманием и формировать предсказуемую структуру движения интерфейса без внешних визуальных эффектов.