Использование 12 принципов анимации Disney в вашем следующем проекте веб-дизайна

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

И в этом суть. 12 тонких принципов анимации. Они производят впечатление на зрителей, даже если они этого не осознают. Они заставляют нас смеяться, плакать, сочувствовать и мечтать, иногда в одной и той же сцене. И они создают персонажей и объекты, которые выглядят и двигаются так реалистично, что хочется дотянуться до них и прикоснуться к ним. (Вы когда-нибудь видели Коко ? Я отдыхаю.)

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

Краткая история 12 принципов анимации

Двенадцать принципов анимации представили Олли Джонстон и Фрэнк Томас, двое из «Девяти стариков» Диснея, основная группа аниматоров, которые присоединились к ним в 1920-х и 30-х годах. Джонстон и Томас написали «Иллюзию жизни: Disney Animation» в 1981 году, и она осталась «библией» анимации. В книге подробно рассматриваются подходы ведущих аниматоров Диснея к извлечению 12 принципов. Хотя эти принципы изначально предназначались для рисованной анимации, они пережили технологические изменения и теперь используются компьютерными аниматорами (такими как Pixar) и веб-дизайнерами.

12 принципов анимации и то, как они влияют на веб-дизайн

Есть причина, по которой эти принципы выдержали испытание временем. Иногда основы остаются лучшими.

1. Сжатие и растяжка

Источник: Крис Гэннон через Giphy

«Сжать и растянуть» - самый важный из принципов анимации. Это дает анимации гибкость, гравитацию, вес и массу. Когда объект находится в движении, он не сохраняет прежнюю форму.

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

В веб-дизайне «Сжать и растянуть» используется, когда объекты должны быть привлекательными. Если есть объект, который должен выглядеть так, как будто он имеет физическую массу, этот принцип может помочь.

2. Ожидание

Источник: CentoLodigiani через Giphy

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

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

3. Постановка

Постановка ведет взгляд зрителя так, что он будет смотреть туда, куда вы хотите («ведущие линии» в фотографии). Преуменьшайте внимание к остальной части сцены, чтобы зритель сосредоточился именно на том, что вы хотите. Другой компонент постановки состоит в том, что за каждым действием персонажа стоит намерение. Если вы изолировали каждый кадр анимации, вы могли бы определить намерение позы.

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

4. Прямо вперед и поза для позы.

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

Источник: Винченцо Лодиджиани, художник движения.

Сегодня в компьютерной анимации используется «поза для позы», потому что компьютер может автоматически заполнять недостающие кадры. Взгляните на анимацию Чехова - вы можете сказать, что они не совсем плавные (да и не должны быть). Если вы хотите создать «прямую» анимацию на своем веб-сайте, вы можете использовать функцию синхронизации steps (), которая позволяет вам определять несколько кадров и отображать их в последовательности.

5. Завершение и перекрытие действий

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

• Действие с перекрытием: разные части объекта движутся с разной скоростью.
• Follow Through: слабо связанные части объекта продолжают движение в течение нескольких секунд после того, как основной объект перестал двигаться. Эти части выйдут за точку остановки, а затем потянутся к объекту.

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

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

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

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

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

6. Медленное начало и замедление

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

Источник: Иллюзия жизни на Tumblr

Для веб-дизайна у CSS есть две функции синхронизации, связанные с этим принципом: легкость и легкость. Вы можете увидеть пример на веб-сайте «Ваш план, ваша планета» (сначала нажмите «Приступим»).

7. Дуга

Как и многие другие 12 принципов анимации, «дуга» основана на физике. Объекты обычно движутся по дуге под действием силы тяжести. Если бы они оставались прямыми, движение было бы механическим, а не реалистичным.

Это относится и ко всем типам движения, а не только к дугам от низкого к высокому к низкому:

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

8. Вторичное действие

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

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

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

9. Время

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

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

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

Источник: @scottthigpen на Giphy

В веб-дизайне тайминг используется для того, чтобы элементы либо задерживались немного дольше, либо быстро исчезали, особенно при ответе на взаимодействие с пользователем. Например, если пользователь хочет закрыть меню, вы можете установить время, чтобы оно оставалось на 300 мс. Если они коснутся элемента на панели навигации, вы захотите, чтобы действие выполнялось быстро (100 мс).

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

Хотя многие из 12 принципов анимации являются реальностью, сосредоточенным, красота анимации является то , что это не реально. Принцип «преувеличения» гласит, что слишком много реализма может умалить то, в чем анимация лучше всего: развлечение. Преувеличение используется, чтобы сделать персонажей и предметы более интересными. Это берет реальность и поднимает ее на ступеньку выше, ровно настолько, чтобы сцена оставалась правдоподобной. Преувеличение требует сдержанности, чтобы сцена не стала абстрактной или сюрреалистической.

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

11. Сплошной рисунок

Источник: Иллюзия жизни на Tumblr

Хотя технически анимация является 2D, она должна реалистично отображаться в 3D. Принцип «твердого рисунка» можно также назвать «перспективой», потому что он предполагает способность рисовать и понимать такие основы, как:

• Анатомия
• Остаток средств
• Последовательность
• Свет и тень
• Объем
• Масса

Для веб-дизайнеров добавление глубины к элементу показывает пользователям, что они могут с ним взаимодействовать. Вы можете увидеть это в действии на нашем сайте. Посмотрите, как кнопка «Присоединиться к загрузке» становится розовой, когда я прокручиваю страницу вниз:

12. Обращение

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

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

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

Заключение

12 принципов Disney могут помочь с простой анимацией, например, если вы создаете интерактивную игру на своем веб-сайте, но они также могут помочь с дизайном для всех видов веб-страниц. Когда дело доходит до фильмов Диснея, большинство потребителей похожи на меня: я знаю, что мне что-то нравится, и мой мозг обрабатывает сигналы, но я не могу понять, почему у меня такие реакции. Работа веб-дизайнера - предугадывать, что подумает и сделает посетитель, а затем тонко направить его к правильным действиям.

Ищете еще больше способов связаться со своей аудиторией? Прочтите в нашем блоге об использовании цветовых эмоций.