Как законы анимации студии Disney помогают создавать удобные интерфейсы

В начале XX века аниматоры создавали кадры вручную, но движения персонажей выглядели рваными и неестественными. В 1981 году два ведущих аниматора студии Disney — Фрэнк Томас и Олли Джонстон — сформулировали 12 принципов анимации в книге The Illusion of Life: Disney Animation. Эти принципы стали фундаментом для создания анимации во всех сферах — от кино до видеоигр и веб-дизайна.

12 принципов анимации:

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

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

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

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

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

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

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

Приём можно использовать в любой анимации интерфейса. Для упрощения разработки в CSS есть функция easing (ease-in-out), чтобы сразу же добавить эффект смягчения.

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

Этот приём делает движение выразительным и убедительным. Без него объекты выглядят плоскими и статичными.

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

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

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

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

Этот принцип определяет два подхода к созданию анимации:

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

Использование ключевых поз в анимации делает её более читаемой:

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

В реальной жизни объекты редко двигаются по прямым линиям. Например:

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

Принцип используют в элементах дизайна и анимации персонажей.

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

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

Теперь добавим дополнительные действия:

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

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

Когда анимация основана на естественных законах движения, она воспринимается легко и комфортно, создаёт плавное, логичное и предсказуемое поведение элементов.

Принципы анимации Disney, разработанные для создания реалистичных персонажей, прекрасно адаптируются и под цифровые продукты и интерфейсы. Внедрение принципов позволяет: