Почему линейное движение выглядит механическим
В жизни предметы не стартуют сразу на полной скорости и не замирают мгновенно: им нужно разогнаться и затормозить. Линейная анимация пропускает оба этапа, поэтому глаз считывает её как движение механизма.
Линейная скорость уместна там, где так и задумано: бегущая строка, вращение индикатора загрузки, прокрутка титров.
Три базовые кривые
Ease-out — быстрый старт и мягкое торможение. Подходит для появления элементов: объект сразу привлекает внимание и спокойно встаёт на место.
Ease-in — медленный старт и ускорение к концу. Им удобно уводить объект из кадра: он набирает скорость и улетает за край.
Ease-in-out — разгон и торможение. Это вариант по умолчанию для перемещения внутри кадра, когда объект начинает и заканчивает движение на экране.
В After Effects такие кривые получаются через Easy Ease и редактор графика скорости, в CSS — через cubic-bezier.
Длительность зависит от размера и пути
Крупный объект воспринимается тяжёлым, и быстрая анимация выглядит для него неестественно. Мелкий значок может переместиться за 150–200 мс, плашка на полэкрана — за 400–600 мс. Чем длиннее путь, тем больше времени нужно движению.
Если кнопка и фон двигаются с одной длительностью и одной кривой, кадр становится плоским. Сдвиньте старт второстепенных элементов на 2–4 кадра относительно главного, и движение начнёт читаться слоями.
Как проверить кривую
Посмотрите анимацию на скорости 25 %. На замедлении видно, где объект дёргается при торможении или проскакивает нужную точку.
Потом прокрутите её в реальном темпе несколько раз подряд. Если движение заметно при первом просмотре, а дальше не отвлекает, длительность подобрана верно.
Для интерфейсов есть ещё одна проверка: анимация не должна задерживать человека. Если пользователь ждёт окончания перехода, чтобы нажать следующую кнопку, переход стоит сократить.
Посчитайте свой роликВставьте текст озвучки и узнайте длительность и число кадров.
Открыть калькулятор