12 принципов анимации — от правил студии Disney до современного моушн-дизайна

В 1981 году аниматоры студии Disney сформулировали 12 принципов, по которым создавали живое, естественное и убедительное движение персонажей. Если кажется, что дальше пойдет сухой экскурс в историю, — не спешите закрывать статью!

Принципы анимации нашли себя за пределами мультипликации  — в типографике, логотипах, цифровых продуктах, интерфейсах, бренд-айдентике. А пользователи уже привыкли к интерактивным подсказкам и проработанности мелких движений.

Мы разобрали 12 принципов анимации с поправкой на современный дизайн и маркетинг. Эксперт материала, моушн-дизайнер Владислав Артемьев, подготовил обучающие анимации к каждому принципу.

Почему 12 принципов — это классика

Принципы сформулировали аниматоры студии Disney Фрэнк Томас и Олли Джонстон. Изначально они собирали правила и методы для создания стилизованных персонажей в мультфильмах. Аниматоры опирались на ощущение зрителя — он должен чувствовать вес тела, характер и эмоцию, даже если на экране будет нарисованный кролик или вымышленное существо.

12 классических принципов можно разделить на несколько подгрупп.

В традиционной анимации большое значение отдавали постановке сцены — это аналог режиссуры. Раскадровщик выбирал ракурс, освещение и окружение так, чтобы взгляд зрителя сразу считывал идею. Затем он продумывал движения персонажей.

Движения создавались двумя основными способами.

«Прямо вперед». Аниматор рисовал действие последовательно, кадр за кадром, от начала сцены до конца. Такой подход часто давал живое и немного непредсказуемое движение, но требовал большого опыта — легко было потерять пропорции или сбиться по длительности сцены.

«От позы к позе». В нем сначала задавали опорные позы, которые обозначали главные моменты действия, а затем заполняли промежутки между ними. Этот метод позволял лучше контролировать структуру сцены.

Отдельно стоял принцип «четкого рисунка». Он касался не столько движения, сколько качества работы. Художнику предстояло точно передать пропорции, перспективу и форму, чтобы персонаж выглядел объемным и устойчивым в пространстве. Не имело значения, кто перед зрителем — злодей, герой или комический персонаж. Главное, чтобы образ вызывал эмоцию и за ним хотелось наблюдать.

Сейчас основы режиссуры кадра, качества и организации работы нужны, например, иллюстратору. А современный рынок коммерческой анимации опирается больше на физику движения — в следующем разделе расскажем, почему.

Какие принципы актуальны сейчас

Классические 12 принципов создавались для персонажной анимации, где художник вручную рисует каждый этап движения, а зритель наблюдает происходящее со стороны и не влияет на ход сцены.

В цифровых продуктах ситуация иная — человек нажимает кнопки, скроллит, открывает экраны и ждет понятной реакции интерфейса. Анимация помогает ему разобраться, что изменилось и к чему привело действие.

Принципы заложены в стандартные кривые анимации большинства дизайн-систем. В гайдлайнах Google Material и Apple HIG описаны кривые Безье, где движение начинается с ускорения и заканчивается замедлением. А еще — трансформация форм, маскирование, сжатие и растяжение.

Чаще дизайнер задает два состояния элемента: до действия и после него. Например, кнопка в обычном виде и кнопка после нажатия. Далее все движения между этими состояниями программа создает автоматически — заполняет промежуточные кадры между заданными точками. Такой подход называется keyframe-анимацией и сегодня считается стандартом для веба и мобильных приложений.

На это указывает арт-директор из США с опытом работы в UX/UI 20 лет, преподаватель дизайн-мышления Иссара Вилленскомер. Он предложил собственные 12 принципов анимации интерфейсов. В них меньше внимания к выразительности и больше — к понятности происходящего на экране.

Далее вместе с экспертом мы разберем 12 принципов современной анимации, которые опираются на идеи Disney, но при этом применимы в интерфейсах или рекламе.

Ускорение в начале и замедление в конце

Суть принципа. В реальном мире мы почти никогда не начинаем движение мгновенно и не останавливаемся резко. Сначала идет ускорение, в конце — постепенное замедление.

На чем основан. Принцип опирается на инерцию — естественную динамику разгона и торможения. Глаз к этому привык, поэтому такое движение человека или объекта кажется нам естественным.

Где используется. Практически все анимации в современных интерфейсах строятся с учетом ускорения и замедления. Например, кнопки появляются с уменьшением прозрачности, прокрутка экрана останавливается постепенно. Логично, что и для графики или нарисованного персонажа важно учесть разгон и торможение.

Без инерции движение выглядит резким и механическим. Поэтому от принципа осознанно отказываются ради стилизации — под ретро-цифровую или 8-битную эстетику, где резкие скачки и ступенчатые переходы становятся частью визуального языка.

Связывание элементов

Суть принципа. Свойства одного элемента или объекта связано со свойствами другого. Поэтому они двигаются или изменяются вместе.

На чем основан. Человеческий глаз склонен объединять объекты, которые движутся согласованно. Так мы воспринимаем группы предметов в реальном мире. Например, корзину с фруктами или стаю птиц в полете.

Где используется. Принцип применяют для визуальной иерархии. Например, элементы внутри папки временно ведут себя как один объект при перемещении или сортировке. Другой частый сценарий — прокрутка списка, при которой уменьшается шапка приложения. Она как бы подстраивается под движение контента.

Тайминг

Суть принципа. Тайминг — это скорость и длительность движения. Он определяет, сколько времени занимает действие и как оно ощущается.

На чем основан. Принцип связан с физикой веса и инерции. Чем тяжелее объект, тем медленнее он разгоняется и останавливается.

Где используется. Тайминг задает длительность всех анимаций и паузы между ними. От этих значений зависит, будет интерфейс восприниматься быстрым и отзывчивым или основательным и неторопливым.

Еще принцип заметен, например, при изменении числовых значений: вместо резкого скачка цифры плавно «добегают» до нового значения. В дизайн-системах обычно заданы базовые диапазоны: 200–300 мс на простые переходы и до 500 мс на более сложные.

Сквозное движение и захлест

Суть принципа. Действие не обрывается сразу — части одного объекта продолжают двигаться с небольшой задержкой после завершения основного действия.

На чем основан. Принцип опирается на инерцию.

Где используется. В интерфейсах и графике — там, где элементы состоят из нескольких частей. Например, карточка товара уезжает с экрана, а тень или вложенные элементы слегка запаздывают. При скролле списков контент может остановиться раньше, чем декоративные элементы или индикаторы.

Дуги

Суть принципа. Движение по дуге, то есть по изогнутой траектории, воспринимается естественнее, чем по прямой.

На чем основан. В реальном мире объекты движутся по воображаемой дуге. Рука при взмахе описывает изогнутую линию, брошенный предмет летит по параболе.

Где используется. Анимации с мягкими кривыми выглядят гибкими и дружелюбными. В интерфейсе вместо движения строго вверх или вниз элементы могут смещаться по диагонали или кривой: карточка уезжает по дуге и одновременно уменьшается. Другой пример — курсор может двигаться прямо, но сам объект слегка отстает и догоняет его по дуге.

Сжатие и растяжение

Суть принципа. Сжатие и растяжение делают движение живым и выразительным. Они подчеркивают свойства объекта — мягкий он или твердый.

На чем основан. Принцип описывает деформацию объекта во время движения при сохранении его объема. В реальном мире мягкие материалы меняют форму под нагрузкой, лицо меняет мимику в зависимости от наших эмоций.

Где используется. Сжатие и растяжение передают характер бренда. Упругие, мягкие деформации часто ассоциируются с дружелюбным тоном, юмором и открытостью.

Типичный пример — кнопка, которая едва заметно сплющивается, имитируя физическое нажатие, а затем возвращается в исходное состояние. Такое движение создает ощущение отклика даже без тактильной обратной связи.

Принцип активно используют в интерфейсах, логотипах и типографике.

Маскирование и фокусировка

Суть принципа. Управление тем, что видно зрителю в конкретный момент. Часть контента может быть скрыта под «маской» и открываться постепенно. Либо окружение временно уходит на второй план и уступает место объекту в фокусе.

На чем основан. Зрение человека тянется к более ярким, контрастным и четким объектам. А приглушенное по оттенку или скрытое воспринимается как менее значимое.

Где используется. Затемнение окружения стало стандартным приемом для модальных окон и диалогов. Фон приглушается, когда поверх появляется важный элемент. Тот же принцип используют при работе с изображениями, когда в режиме редактирования затемняется все, кроме выбранной области.

Подготовка

Суть принципа. Подготовка — это небольшое опережающее движение перед основным действием. Оно заранее подсказывает, что сейчас произойдет, и делает движение понятнее.

На чем основан. В реальной жизни почти любое резкое движение имеет начальную фазу. Перед прыжком человек делает приседание, перед нырком — вдох и замах. Зритель успевает «считать» намерение еще до самого действия.

Где используется. В бренд-анимации подготовка проявляется через визуальные намеки и промежуточные состояния. Например, hover-эффекты на веб-страницах — при наведении курсора CTA-элемент слегка меняется. Он может подсвечиваться, увеличиваться или менять цвет, подсказывая интерактивность.

В графике и рекламной анимации подготовка используется для усиления выразительности. Перед прыжком персонаж может слегка присесть, перед резким движением — отклониться в противоположную сторону.

Смещение и задержка

Суть принципа. Элементы появляются не одновременно, а с небольшим сдвигом во времени — это поддерживает последовательность. Главное возникает первым и располагается ближе к центру внимания, второстепенное — чуть позже или находится уже с краев.

На чем основан. В природе действия редко происходят синхронно. Например, тело человека реагирует по цепочке — сначала корпус и голова, затем руки и ноги. Глаз привык к такому порядку и легко считывает его как организованный.

Где используется. В интерфейсах этот принцип заметен в последовательном появлении компонентов. Например, при смене экрана сначала появляется заголовок, затем основной контент, после — дополнительные элементы. Взгляд пользователя плавно перемещается по экрану в заданном порядке.

Тот же прием применяют в переходах лендингов и раскрытии экранов со сложной структурой.

Трансформация форм

Суть принципа. Один элемент плавно превращается в другой. При этом форма должна оставаться узнаваемой на каждом этапе движения.

На чем основан. Принцип опирается на способность объектов менять состояние — как вода, переходящая из одной формы в другую. Также он связан с тем, как человек узнает знакомые образы даже при изменении их внешнего вида.

Где используется. Прием активно используют в анимации логотипов и иконок для показа смены состояний. Например, кнопка «Загрузить» может превращаться в индикатор процесса, а затем — в иконку завершения. Все этапы происходят в одной зоне, поэтому пользователь воспринимает их как части одного действия.

При оживлении и трансформации бренд-символики важно, чтобы форма не искажалась до неузнаваемости. Например, буквы логотипа или фирменного шрифта должны оставаться читаемыми и не превращаться в абстрактные пятна.

Преувеличение

Суть принципа. Преувеличение — это намеренное утрирование движения, формы или реакции. Оно делает идею заметной.

На чем основан. Принцип опирается на сознательное отступление от физической достоверности. Небольшая «карикатурность» усиливает выразительность, а сцена вызывает эмоцию.

Где используется. В анимированных логотипах и заставках преувеличение создает эффекта зрелища. Буквы могут разлетаться дальше, чем это выглядело бы правдоподобно, а знак — подпрыгивать выше обычного.

В игровых и развлекательных интерфейсах преувеличение подчеркивает значимые моменты. Когда пользователь получил награду или завершил уровень, на экране может появляться анимация с гиперболой. Например, значок успеха заметно увеличивается, элементы экрана на мгновение «радуются» вместе с пользователем. Это усиливает ощущение события и делает его эмоциональной точкой опыта.

Вторичные действия

Суть принципа. Вторичные действия — это дополнительные движения объектов, которые сопровождают основное. Такие детали добавляют глубину и ощущение живости.

На чем основан. В реальности одно действие редко происходит изолированно. Например, когда птица взлетает, ветка под ней прогибается и трясется еще какое-то время после.

Где используется. В интерфейсах вторичные действия часто сопровождают основные события. Например, при отправке сообщения главный объект исчезает или уезжает. Но рядом появляется вспышка, небольшая галочка или разлетаются декоративные элементы.

Дополнительные действия можно найти и в фоновых анимациях. При прокрутке страницы основной контент появляется по заданному сценарию, а линии, формы или текстуры слегка движутся на заднем плане. Они добавляют эмоциональный оттенок, позволяют встроить юмор или микро-истории.

Как выбрать принципы для своего проекта

В эпоху визуальной перегруженности использовать все принципы анимации сразу — сомнительное решение. Один бренд может позволить себе мягкие дуги, сжатие и вторичные движения, другой — сухую геометрию без лишних эффектов.

С интерфейсами ситуация сложнее. Пользователь взаимодействует с ними напрямую и ждет быстрой реакции на свои действия. В этом пространстве анимация должна объяснять происходящее: микро-интеракции, реакции на ввод, подсказки при ошибках, hover-эффекты.

Но и здесь иногда нужны отступления от правил. Если человеку нужно быстро увидеть список из пяти элементов, не нужно заставлять его ждать, пока каждый пункт эффектно появится.

Как итог, выбор принципов сводится к трем вопросам:

• Это движение соответствует характеру бренда и продукта?
• Понятно ли аудитории, что происходит на экране?
• Есть ли движение, которое будет раздражать пользователя?

Ответы на эти вопросы определяют, какие правила стоит брать на вооружение, а какие отбросить в сторону.