Easing в анимации: ease in, ease out и кривые
Easing — это то, как анимированное значение ускоряется и замедляется между ключевыми кадрами, вместо того чтобы двигаться с постоянной скоростью. Easing заставляет движение начинаться плавно, останавливаться плавно или и то, и другое — так, как движутся объекты с весом — и задается кривой интерполяции между двумя ключами.
Краткий ответ
Сглаживание контролирует ускорение между ключевыми кадрами. Линейное движение происходит с постоянной скоростью и резко останавливается; сглаженное движение ускоряется от одного ключа и замедляется к следующему. Поскольку инструменты расходятся во мнениях относительно значения «ease in», наиболее понятно говорить «медленный старт» (ускорение) или «медленный финиш» (замедление). Безье-манипуляторы на каждом ключе точно формируют сглаживание, а манипулятор, вытянутый за значение ключа, создает превышение.
Почему постоянная скорость выглядит неестественно
Реальные объекты имеют массу. Автомобиль не достигает крейсерской скорости в тот же момент, как начинает движение, и дверь не останавливается мгновенно у рамы. Движение, которое начинается и останавливается на полной скорости, воспринимается как механическое, невесомое или сгенерированное компьютером, даже если зритель не может сказать, почему.
Аниматоры Disney назвали этот принцип slow in и slow out — один из двенадцати принципов анимации, изложенных в книге «Иллюзия жизни». Большее количество рисунков в начале и конце движения и меньшее в середине заставляют его ускоряться и замедляться. В 3D-программах тот же эффект достигается за счет кривой между ключами, а не за счет дополнительных рисунков.
Ease in и ease out означают противоположные вещи
Это самый распространенный источник путаницы, и это не ваша вина. В CSS и широко используемых функциях easing Роберта Пеннера ease-in означает, что движение начинается медленно и ускоряется, а ease-out — что оно начинается быстро и замедляется до остановки. Кривая относится ко всему движению между двумя ключами.
В After Effects и многих инструментах, основанных на ключах, сглаживание (easing) привязано к самому ключу: «ease in» означает замедление движения при приближении к ключу, а «ease out» — медленное начало движения при его отходе. Таким образом, «ease in» на последнем ключе в After Effects и «ease-out» в CSS для движения дают одинаковое замедление, но называются противоположно. Описание движения — медленный старт, медленный финиш, медленно на обоих концах — помогает избежать этой двусмысленности.
Типы интерполяции и манипуляторы Безье
Линейная интерполяция проводит прямую линию между ключами: постоянная скорость и резкое изменение на каждом ключе. Постоянная, ступенчатая или «hold» интерполяция сохраняет значение до следующего ключа, а затем резко меняет его, что полезно для блокинга, морганий и всего, что должно быть мгновенным. Безье- или сплайновая интерполяция рисует плавную кривую через ключи, и именно здесь применяется сглаживание.
Безье-ключ имеет два манипулятора: один управляет кривой, подходящей к ключу, другой — кривой, отходящей от него. Плоский манипулятор означает нулевую скорость в ключе — это сглаживание. Более длинный манипулятор продлевает это замедление на большую часть движения. Манипуляторы, расположенные на одной линии, обеспечивают плавный проход через ключ; разделенные манипуляторы создают резкое изменение направления, например, отскок. Если потянуть манипулятор так, что кривая выйдет за значение ключа, движение пройдет мимо своей цели и вернется обратно.
Стандартные семейства сглаживания
Уравнения сглаживания Пеннера, опубликованные в начале 2000-х годов, стали общим словарем для именованных кривых: sine, quad, cubic, quart, quint, expo и circ, каждая в формах «in», «out» и «in-out», варьируясь от едва заметных (sine) до резких (expo). Кривая «Back» превышает целевое значение перед возвращением. Большинство инструментов для анимации и CSS-библиотек поставляются с какой-либо версией этого набора, обычно аппроксимированной кубическими Безье-кривыми.
Elastic и bounce являются исключениями. Они колеблются несколько раз в пределах одного движения, чего не может сделать одна кубическая Безье-кривая, поэтому инструменты либо строят их из нескольких ключей, либо генерируют процедурно.
Какое сглаживание использовать
Сглаживайте оба конца для большинства движений, которые начинаются и останавливаются: наезд камеры, объект, скользящий на место, поворот головы. Используйте медленный финиш для объектов, которые прибывают и устанавливаются, и медленный старт для запускающихся объектов. Сохраняйте линейную интерполяцию для движения, которое должно быть постоянным — вращающийся вентилятор, конвейер, середина циклического движения — и для ключей, через которые движение должно проходить прямо. Используйте «hold» для мгновенных изменений, морганий и блокинга.
Сглаживание в Mixos Studio
Выберите ключ, и заголовок таймлайна предложит Linear, Ease in, Ease out, Ease и Hold. Они следуют ключевой конвенции: Ease in замедляет движение, прибывающее к ключу, Ease out замедляет его при отходе, а Ease делает и то, и другое — это Easy Ease в After Effects. При фокусе на таймлайне F9 применяет Ease, ⇧F9 — Ease in, а ⌘⇧F9 — Ease out.
«Кривая…» открывает семейства Пеннера от Sine до Back, которые можно искать как по ощущениям, так и по названию, а также любые сохраненные вами кривые. Режим кривых отображает треки как кривые с Безье-манипуляторами, которые можно перетаскивать напрямую, включая превышение. Elastic и bounce намеренно отсутствуют в списке кривых; вместо них такие движения создают генераторы пружины и отскока в разделе «+ Motion».
Часто задаваемые вопросы
Что означают ease in и ease out?
Оба описывают постепенные изменения скорости, но инструменты используют их в противоположных смыслах. В CSS и функциях Пеннера ease-in означает медленное начало и ускорение, а ease-out — быстрое начало и замедление до остановки. В After Effects и других инструментах на основе ключей, easing into key замедляет движение по мере его приближения, а easing out of key замедляет его по мере удаления.
В чем разница между линейной и интерполяцией Безье?
Линейная интерполяция перемещает значение с постоянной скоростью и резко меняется на каждом ключе. Интерполяция Безье рисует плавную кривую через ключи, с ручками, которые контролируют ускорение и замедление движения, что и делает easing возможным.
Что такое hold-ключ?
Ключ с постоянной (ступенчатой) интерполяцией: значение остается точно там, где оно есть, до следующего ключа, затем перескакивает. Используется для блокировки, морганий, переходов и всего, что должно мгновенно меняться, а не перемещаться.
Как сделать, чтобы анимация «перелетала»?
Либо добавьте ключ за целевым и ключ стабилизации после него, либо потяните ручку Безье так, чтобы кривая вышла за пределы значения ключа и вернулась. Кривая easing в стиле back делает то же самое, что и предустановка.
Почему моя анимация выглядит роботизированной?
Обычно потому, что она линейная: постоянная скорость с резкими началами и остановками на каждом ключе. Сглаживание начал и остановок, а также смещение частей движения на несколько кадров, чтобы они не двигались одновременно, решает большую часть проблем.
Задайте движение, затем попробуйте Linear, Ease и Back на одних и тех же двух ключах — разницу легче увидеть, чем описать.