Создание интерфейсной анимации — это примерно 35% от задачи. Остальные 55% принадлежат разработчикам, от которых будет зависеть финальный вид и функциональность приложения, а между этими процентами — попытка понять технический и визуальный языки друг друга.
Как правильно описывать анимацию
Чтобы всё работало и выглядело так, как задумывалось на этапе концепции, дизайнеру нужно научиться корректно описывать и передавать макеты с помощью четырёх атрибутов, которые разработчики отождествляют с интерфейсной анимацией. Это информация о длительности, плавности, способах трансформации и начальном и конечном состояниях объекта:
триггер,
эффект,
тайминг,
изинг.
Самый быстрый и простой способ передать эти значения — описать анимацию словами с помощью атрибутов движения. И да, никто не запрещает просто скидывать гифку или видео. Но в этом случае нужно быть готовым к тому, что финальный результат получится не таким, как вы его представляете.
Я применяю этот способ, когда делаю анимацию в Figma, — это вполне рабочая история при сжатых сроках. Из-за ограничений инструмента некоторые тонкости в таймингах приходится прописывать явно.
Для передачи более сложных взаимодействий дизайнер должен понимать возможности экспорта у разных инструментов анимации.
Встроенные инструменты для экспорта
Интерфейсная анимация — это комплексное решение, которое влияет на восприятие приложения пользователем и затрагивает большинство свойств объектов на экране. Обычно передача макетов в разработку требует от дизайнера использования решений со встроенными инструментами для экспорта. Это может быть After Effects, Figma и плагин Aninix в Figma, Principle, Protopie.
After Effects
After Effects — мощный инструмент для анимаций, но не для прототипирования. Несмотря на то что ему везде обучают как инструменту для анимации в интерфейсах, он не очень для этого подходит, так как его возможности не ограничены, а интерфейсная анимация как раз про множество ограничений. Я бы советовала использовать АЕ для моушна, дизайн-концепций и шотов на Dribbble.
After Effects можно использовать для создания Lottie-файлов, которые удобны для анимации лоадеров, персонажей, микроанимаций, ошибок и состояний загрузки. Для экспорта нужен один из двух плагинов — Bodymovin или LottieFiles. Библиотека Lottie делает парсинг всей анимации и создаёт JSON-файл, который можно встроить в код сайта или в приложения.
Figma
Анимация в Figma очень удобна — не нужно устанавливать программы, куда-то складывать дополнительные файлы и линковать с макетами. Инструмент не даёт возможности настраивать параллельное движение разных объектов на экране, поэтому отлично подойдёт для быстрого прототипирования и несложных взаимодействий.
Figma, так же, как и многие инструменты, не даёт возможности анимировать кривые. И это логично, потому что в разработке изменять кривые сложнее, чем менять размеры объектов.
В Figma есть Inspector — режим для разработчиков с полем с атрибутами анимации. В него входит описание свойств кривой изинга, продолжительности и задержка.
К сожалению, то, что есть в Inspector, не всегда понятно для дизайнера, поэтому я делаю дополнительные подписи в формате: Trigger, Easing, Duration, Delay (если есть) и Effect. Effect в Figma — это просто изменение объекта от одного состояния экрана к другому.
Плагин Aninix в Figma
Aninix — это плагин, который расширяет возможности анимации Figma. В отличие от базовых функций инструмента в нём можно отдельно настроить изинги и тайминги разных слоёв. Кроме того, в Aninix есть небольшая библиотека с пресетами для анимации входа и выхода объекта на экран и с экрана, а также с разными эффектами вроде баунса, пульсации или вращения.
Интерфейс плагина выглядит как Figma — это отдельное окно, в которое без проблем экспортируется макет. Сложные и большие макеты загружаются достаточно долго и сильно тормозят, но с чем-то небольшим плагин справляется отлично.
В Aninix удобная и простая передача в разработку: дизайнер генерирует ссылку, по которой можно посмотреть все атрибуты движения каждого объекта. Сам файл прикрепляется к фрейму в Figma и помечается специальным значком.
Сложные анимации в коде делаются пошагово — мы применяем сначала одно преобразование с заданной продолжительностью, а затем следующее, поэтому при работе в Aninix очень удобно видеть макет, разбитый на этапы и с проставленными параметрами. Кроме того, анимацию можно просматривать в замедленном виде и останавливать в любом месте, чтобы посмотреть, какие параметры объектов были именно в этой точке времени.
Principle
Principle — один из самых популярных инструментов прототипирования за счёт простой функциональности, которой при этом достаточно для разработки сложных взаимодействий. В инструменте есть полезная фича — Drivers. Она позволяет проектировать анимацию элементов в зависимости от состояния другого объекта, например изменение свойств объекта в зависимости от скролла или драга.
Слабое место Principle — отсутствие отдельного инструмента для передачи анимации в разработку. Экспортировать макеты можно только в .GIF или .MP4 — это означает, что программистам придётся установить приложение для отображения всех настроек, деталей и характеристик анимации.
Protopie
Protopie по логике построения анимации похож на код — есть триггер и множество изменений свойств со своими продолжительностью, задержкой и изингом. Также в инструменте есть большое количество условий и переменных — дизайнеру нужно самостоятельно замерять положения объектов и строить зависимости. Это намного облегчает работу именно разработчиков.
Если говорить о передаче макетов, то в Protopie придумали свой способ: дизайнер записывает скринкаст, после чего платформа генерирует ссылку на файл, в котором есть изменения свойств и таймингов всех слоёв на экране. Ссылку можно отправлять кому угодно, но редактирование всё равно будет доступно только в исходнике.
Из плюсов Protopie я бы отметила максимальное приближение дизайна после разработки к изначальной концепции, удобную передачу макетов и имитацию реальной работы с контентом, числами, камерой и войсами. Из недостатков — сложность в использовании именно для дизайнеров и большое количество времени, затраченного на проектирование.
Готовые решения
Иногда к инструментам для анимации можно и не прибегать — существуют библиотеки решений с открытым кодом, а также каталоги готовых анимаций, которые без проблем импортируются в код. Среди основных источников — Youtube, CodePen, Lottie, Rive и реальные сайты и приложения.
YouTube
На YouTube можно найти много интересных эффектов с разбором кода. Такой подход экономит время разработчика и повышает насмотренность дизайнера.
Недавно я думала, как сделать эффект, похожий на круговые разноцветные волны, — они должны были находиться в постоянном рандомном движении. Решить задачу помог туториал по генеративной анимации от Паши Жака.
Сам туториал можно посмотреть здесь.
Ещё можно заглядывать на канал Design Code — там много обучающих роликов по разработке на SwiftUI, React и Flutter, проектированию в Figma, анимации и работе в Spline. Авторы разбирают как отдельные фичи, например 3D-свайп карточек с параллаксом их из ленты, так и вёрстку целых экранов и флоу. Также интересные туториалы по разработке на SwiftUI публикуют Kavsoft и AnthonyDesignCode.
CodePen
CodePen — веб-редактор кода HTML, CSS и JavaScript, который позволяет экспериментировать с кодом прямо в браузере. Находками и решениями можно поделиться с комьюнити — это напоминает Dribbble, только для разработчиков.
Для дизайнеров CodePen представляет большой каталог интересных эффектов и анимаций с открытым для просмотра и копирования кодом — разработчику нужна будет только ссылка на pen, чтобы оценить, реально ли сделать похожий эффект. Проекты можно быстро копировать и менять под свои настройки — цвет, отступы, скругления, контент и все атрибуты движения. Решения подойдут для веба, но для мобильной анимации платформу можно использовать как базу референсов.
Lottie
Lottie — библиотека для iOS-, Android- и веб-разработки, которая позволяет рендерить анимацию и проигрывать её в приложении в реальном времени. Каждый макет — файл, который можно изменить и переиспользовать в других проектах. Кроме того, c помощью плагина в Figma Lottie-файлы можно вставлять сразу в дизайн в виде .GIF — они будут воспроизводиться в режиме прототипа.
Rive
Rive в этом списке можно отнести к сравнительно новым инструментам для анимации — это связано с тем, что разработчики платформы придумали альтернативный способ работы с макетами.
Подход заключается в рендере файлов на облачных серверах — разработчик просто вставляет в код ссылку на анимацию, которая лежит в профиле Rive. А так как ссылка остаётся постоянной, то все изменения в дизайне автоматически транслируются в рабочее приложение или на сайт, куда встроена анимация. Решение поддерживается на разных платформах и языках и значительно облегчает и ускоряет загрузку приложения.
Rive предоставляет возможность встраивать анимации в рантайме — то есть тогда, когда приложение уже запущено. Lottie-файлы дизайнеры передают разработчикам, мы их встраиваем — и они хранятся и собираются в приложении. В Rive же они будут подгружаться во время работы приложения. Инструмент даёт нам возможность просто указывать ссылку на анимацию. Звучит очень хорошо, приложение будет легче и быстрее скачиваться, но возникает кейс с отсутствием интернета или ошибок на URL — это придётся обрабатывать в дизайне.
В Rive также есть комьюнити, как в Figma или CodePen, откуда можно брать готовые анимации.
Реальные сайты и приложения
В случае с существующими сайтами и приложениями действует простой принцип: если кто-то так сделал, значит, это можно повторить. Такой подход может значительно уменьшить время работы дизайнера, но в плане разработки это лотерея.
Красивые готовые сайты с анимациями можно посмотреть на Awwwards, Godly или hoverstat.
Овервью
При передаче анимации в разработку важно помнить о трёх основных правилах:
1_
Чтобы анимация в релизе совпала с анимацией у дизайнера в голове, разработчику нужно знать все атрибуты движения — триггер, эффект, тайминг и изинг. При этом есть исключения, когда движение можно описать словами.
2_
Библиотеки анимаций и готовые решения — отличный способ сократить рабочее время дизайнера и ресурсы программиста. YouTube, CodePen, реальные сайты — иногда этого достаточно, чтобы понять друг друга.
3_
Во многих программах для анимации есть встроенные механизмы для передачи файлов в разработку — это также неплохая возможность сэкономить пару лишних часов или нервных клеток.