Интерфейсная анимация — лакмусовая бумажка корректного взаимодействия дизайнера и разработчика. В этой статье наш дизайнер интерфейсов Кристина Широкова рассказывает, как не потерять функциональность проекта после передачи анимации в разработку и почему всё не так сложно, как кажется на первый взгляд.
4282 просмотров
Создание интерфейсной анимации — это примерно 35% от задачи. Остальные 55% принадлежат разработчикам, от которых будет зависеть финальный вид и функциональность приложения, а между этими процентами — попытка понять технический и визуальный языки друг друга.
Как правильно описывать анимацию
Чтобы всё работало и выглядело так, как задумывалось на этапе концепции, дизайнеру нужно научиться корректно описывать и передавать макеты с помощью четырёх атрибутов, которые разработчики отождествляют с интерфейсной анимацией. Это информация о длительности, плавности, способах трансформации и начальном и конечном состояниях объекта:
- триггер,
- эффект,
- тайминг,
- изинг.
Самый быстрый и простой способ передать эти значения — описать анимацию словами с помощью атрибутов движения. И да, никто не запрещает просто скидывать гифку или видео. Но в этом случае нужно быть готовым к тому, что финальный результат получится не таким, как вы его представляете.
7 бесплатных программ для анимации
Я применяю этот способ, когда делаю анимацию в Figma, — это вполне рабочая история при сжатых сроках. Из-за ограничений инструмента некоторые тонкости в таймингах приходится прописывать явно.
Кристина Широкова, дизайнер интерфейсов red_mad_robot
Пример описания анимации в коде
Для передачи более сложных взаимодействий дизайнер должен понимать возможности экспорта у разных инструментов анимации.
Встроенные инструменты для экспорта
Интерфейсная анимация — это комплексное решение, которое влияет на восприятие приложения пользователем и затрагивает большинство свойств объектов на экране. Обычно передача макетов в разработку требует от дизайнера использования решений со встроенными инструментами для экспорта. Это может быть After Effects, Figma и плагин Aninix в Figma, Principle, Protopie.
After Effects — мощный инструмент для анимаций, но не для прототипирования. Несмотря на то что ему везде обучают как инструменту для анимации в интерфейсах, он не очень для этого подходит, так как его возможности не ограничены, а интерфейсная анимация как раз про множество ограничений. Я бы советовала использовать АЕ для моушна, дизайн-концепций и шотов на Dribbble.
Кристина Широкова, дизайнер интерфейсов red_mad_robot
After Effects можно использовать для создания Lottie-файлов, которые удобны для анимации лоадеров, персонажей, микроанимаций, ошибок и состояний загрузки. Для экспорта нужен один из двух плагинов – Bodymovin или LottieFiles. Библиотека Lottie делает парсинг всей анимации и создаёт JSON-файл, который можно встроить в код сайта или в приложения.
Создание Lottie-анимации для веба и приложений в After Effects / SonduckFilm
Mixamo. Как применить бесплатные 3D анимации в Unity.
Анимация в Figma очень удобна — не нужно устанавливать программы, куда-то складывать дополнительные файлы и линковать с макетами. Инструмент не даёт возможности настраивать параллельное движение разных объектов на экране, поэтому отлично подойдёт для быстрого прототипирования и несложных взаимодействий.
Figma, так же, как и многие инструменты, не даёт возможности анимировать кривые. И это логично, потому что в разработке изменять кривые сложнее, чем менять размеры объектов.
В Figma есть Inspector — режим для разработчиков с полем с атрибутами анимации. В него входит описание свойств кривой изинга, продолжительности и задержка.
Примеры подписей в Figma
К сожалению, то, что есть в Inspector, не всегда понятно для дизайнера, поэтому я делаю дополнительные подписи в формате: Trigger, Easing, Duration, Delay (если есть) и Effect. Effect в Figma — это просто изменение объекта от одного состояния экрана к другому.
Кристина Широкова, дизайнер интерфейсов red_mad_robot
Примеры подписей в Figma
Aninix — это плагин, который расширяет возможности анимации Figma. В отличие от базовых функций инструмента в нём можно отдельно настроить изинги и тайминги разных слоёв. Кроме того, в Aninix есть небольшая библиотека с пресетами для анимации входа и выхода объекта на экран и с экрана, а также с разными эффектами вроде баунса, пульсации или вращения.
Анимация в Aninix
Интерфейс плагина выглядит как Figma — это отдельное окно, в которое без проблем экспортируется макет. Сложные и большие макеты загружаются достаточно долго и сильно тормозят, но с чем-то небольшим плагин справляется отлично.
Кристина Широкова, дизайнер интерфейсов red_mad_robot
Lottie-анимации в Figma с помощью плагина Aninix / Aninix — Interface animation
В Aninix удобная и простая передача в разработку: дизайнер генерирует ссылку, по которой можно посмотреть все атрибуты движения каждого объекта. Сам файл прикрепляется к фрейму в Figma и помечается специальным значком.
Сложные анимации в коде делаются пошагово — мы применяем сначала одно преобразование с заданной продолжительностью, а затем следующее, поэтому при работе в Aninix очень удобно видеть макет, разбитый на этапы и с проставленными параметрами. Кроме того, анимацию можно просматривать в замедленном виде и останавливать в любом месте, чтобы посмотреть, какие параметры объектов были именно в этой точке времени.
Максим Голов, iOS-разработчик red_mad_robot
Экспорт из Aninix
Анимацию из Aninix можно выгрузить в .GIF, .MP4, .PNG, WebM и Lottie. При этом в Figma она импортируется только в виде .GIF.
Principle — один из самых популярных инструментов прототипирования за счёт простой функциональности, которой при этом достаточно для разработки сложных взаимодействий. В инструменте есть полезная фича — Drivers. Она позволяет проектировать анимацию элементов в зависимости от состояния другого объекта, например изменение свойств объекта в зависимости от скролла или драга.
Работа в Principle на Mac / Daniel Hooper
Слабое место Principle — отсутствие отдельного инструмента для передачи анимации в разработку. Экспортировать макеты можно только в. GIF или. MP4 — это означает, что программистам придётся установить приложение для отображения всех настроек, деталей и характеристик анимации.
Protopie по логике построения анимации похож на код — есть триггер и множество изменений свойств со своими продолжительностью, задержкой и изингом. Также в инструменте есть большое количество условий и переменных — дизайнеру нужно самостоятельно замерять положения объектов и строить зависимости. Это намного облегчает работу именно разработчиков.
Пример работы в Protopie / ProtoPie
Если говорить о передаче макетов, то в Protopie придумали свой способ: дизайнер записывает скринкаст, после чего платформа генерирует ссылку на файл, в котором есть изменения свойств и таймингов всех слоёв на экране. Ссылку можно отправлять кому угодно, но редактирование всё равно будет доступно только в исходнике.
Из плюсов Protopie я бы отметила максимальное приближение дизайна после разработки к изначальной концепции, удобную передачу макетов и имитацию реальной работы с контентом, числами, камерой и войсами. Из недостатков — сложность в использовании именно для дизайнеров и большое количество времени, затраченного на проектирование.
Кристина Широкова, дизайнер интерфейсов red_mad_robot
Инструмент отлично подходит для разработки анимации в рамках дизайн-систем и прототипов, приближенных к реальным приложениям.
Готовые решения
Иногда к инструментам для анимации можно и не прибегать — существуют библиотеки решений с открытым кодом, а также каталоги готовых анимаций, которые без проблем импортируются в код. Среди основных источников — Youtube, CodePen, Lottie, Rive и реальные сайты и приложения.
На YouTube можно найти много интересных эффектов с разбором кода. Такой подход экономит время разработчика и повышает насмотренность дизайнера.
Недавно я думала, как сделать эффект, похожий на круговые разноцветные волны, — они должны были находиться в постоянном рандомном движении. Решить задачу помог туториал по генеративной анимации от Паши Жака.
Кристина Широкова, дизайнер интерфейсов red_mad_robot
Ещё можно заглядывать на канал Design Code — там много обучающих роликов по разработке на SwiftUI, React и Flutter, проектированию в Figma, анимации и работе в Spline. Авторы разбирают как отдельные фичи, например 3D-свайп карточек с параллаксом их из ленты, так и вёрстку целых экранов и флоу. Также интересные туториалы по разработке на SwiftUI публикуют Kavsoft и AnthonyDesignCode.
Создание SwiftUI приложения для iOS 15 / DesignCode
CodePen — веб-редактор кода HTML, CSS и JavaScript, который позволяет экспериментировать с кодом прямо в браузере. Находками и решениями можно поделиться с комьюнити — это напоминает Dribbble, только для разработчиков.
Для дизайнеров CodePen представляет большой каталог интересных эффектов и анимаций с открытым для просмотра и копирования кодом — разработчику нужна будет только ссылка на pen, чтобы оценить, реально ли сделать похожий эффект. Проекты можно быстро копировать и менять под свои настройки — цвет, отступы, скругления, контент и все атрибуты движения. Решения подойдут для веба, но для мобильной анимации платформу можно использовать как базу референсов.
Пример работы в CodePen
Lottie — библиотека для iOS-, Android- и веб-разработки, которая позволяет рендерить анимацию и проигрывать её в приложении в реальном времени. Каждый макет — файл, который можно изменить и переиспользовать в других проектах. Кроме того, c помощью плагина в Figma Lottie-файлы можно вставлять сразу в дизайн в виде. GIF — они будут воспроизводиться в режиме прототипа.
Lottie используется при анимации персонажей, логотипов, элементов с микроанимацией и лоадеров.
Пример кода Lottie / Will Brett Design
Rive в этом списке можно отнести к сравнительно новым инструментам для анимации — это связано с тем, что разработчики платформы придумали альтернативный способ работы с макетами.
Подход заключается в рендере файлов на облачных серверах — разработчик просто вставляет в код ссылку на анимацию, которая лежит в профиле Rive. А так как ссылка остаётся постоянной, то все изменения в дизайне автоматически транслируются в рабочее приложение или на сайт, куда встроена анимация. Решение поддерживается на разных платформах и языках и значительно облегчает и ускоряет загрузку приложения.
Rive предоставляет возможность встраивать анимации в рантайме — то есть тогда, когда приложение уже запущено. Lottie-файлы дизайнеры передают разработчикам, мы их встраиваем — и они хранятся и собираются в приложении. В Rive же они будут подгружаться во время работы приложения. Инструмент даёт нам возможность просто указывать ссылку на анимацию. Звучит очень хорошо, приложение будет легче и быстрее скачиваться, но возникает кейс с отсутствием интернета или ошибок на URL — это придётся обрабатывать в дизайне.
Источник: vc.ru
Создание анимации движения
Прежде чем приступить к анимации, необходимо усвоить следующие основные понятия.
Предварительные условия
Описание
Перед началом работы с анимацией движения необходимо ознакомиться с основами использования временной шкалы и редактирования свойств. Редактировать ключевые кадры отдельных свойств в рабочей области можно в инспекторе свойств или в обновленном редакторе движения.
Animate анимирует только экземпляры символов и текстовые поля. Все остальные типы объектов заключаются в оболочку символа, когда к ним применяется анимация движения. Экземпляр символа может содержать вложенные символы, которые, в свою очередь, тоже могут быть анимированными на своих временных шкалах.
Минимальным структурным элементом слоя анимации движения является диапазон анимации. Диапазон анимации в слое анимации может содержать только один экземпляр символа или текстовое поле. Этот экземпляр символа называется целью диапазона анимации. Тем не менее, один символ может содержать много объектов.
Добавление второго символа или текстового поля в диапазон анимации движения приведет к замене исходного символа в анимации движения. Изменить целевой объект анимации движения можно любым из следующих способов:
- перетащите другой символ из библиотеки в диапазон анимации на временной шкале;
- используйте команду Изменить > Символ > Заменить символ.
Символ можно удалить из слоя анимации, не удаляя и не разделяя саму анимацию. Позже в анимацию можно будет добавить другой экземпляр символа. Также можно в любое время изменить символ или его тип.
Когда анимация содержит движение, в рабочей области появляется траектория движения. Траектория движения показывает положение анимируемого объекта в каждом кадре. Можно изменить траекторию движения в рабочей области, перетаскивая его контрольные точки. Нельзя добавлять направляющую движения в слой анимации или обратной кинематики.
См. также
Компоненты анимации движения
- Это последовательность кадров на временной шкале, в которой одно или несколько свойств объекта на временной шкале меняются со временем.
- Диапазон анимации движения выглядит на временной шкале как группа кадров на одном слое с фоновым цветом.
- Эти диапазоны анимации можно выделять как один объект, перетащить из одного места на временной шкале в другое и даже в другой слой.
- В каждом диапазоне анимации может быть анимирован только один объект в рабочей области. Этот объект называется целевым объектом диапазона анимации.
- это кадр в диапазоне анимации движения, где явно определены одно или несколько значений свойств для целевого анимационного объекта.
- Эти свойства могут включать положение альфа (прозрачность), оттенок цвета и т. д.
- Для каждого определенного свойства создается отдельный ключевой кадр свойства.
- Если во одном кадре задать более одного свойства, то ключевые кадры для каждого из этих свойств будут размещены в этом кадре.
- Используйте редактор движения, чтобы просмотреть каждое свойство диапазона анимации и его ключевые кадры свойств.
- Чтобы выбрать, какие типы ключевых кадров свойств отображать на временной шкале, из контекстного меню диапазона анимации, щелкните правой кнопкой мыши ключевой кадр свойства и выберите «Просмотреть ключевые кадры».
Целевой объект анимации
Анимация движения имеет один объект в диапазоне анимации, который называется ее целевым объектом. Использование одного целевого объекта в анимации обеспечивает несколько преимуществ:
- Анимацию можно сохранить как набор настроек для повторного использования.
- Можно легко перемещать анимацию движения на временной шкале (перетаскивать диапазон анимации в другое место) или в рабочей области.
- Чтобы применить новый экземпляр к существующей анимации движения, выполните следующие действия:
- вставьте его в анимацию с целью замены;
- перетащите новый экземпляр из библиотеки;
- используйте команду «Заменить символ».
Объекты и свойства, для которых возможна анимация движения
В число типов объектов, к которым можно применить анимацию движения, входят фрагменты роликов, графические объекты, символы кнопок, а также текстовые поля. Эти объекты могут иметь следующие свойства:
- Положение по осям X и Y на плоскости
- Положение по оси Z в трехмерном пространстве (только фрагменты роликов)
- Вращение на плоскости (вокруг оси z)
- Вращение вокруг осей X, Y и Z в трехмерном пространстве (только фрагменты роликов): указывает, что FLA-файл предназначен для ActionScript 3.0 и Flash Player 10 или более поздней версии в параметрах публикации. Adobe AIR также поддерживает трехмерное движение.
- Наклон по осям X и Y
- Масштаб по осям X и Y
- Цветовые эффекты: включает в себя альфа-канал (прозрачность), яркость, тон и расширенные параметры для цветов. Цветовые эффекты можно анимировать только для символов и текста TLF. Анимируя эти свойства, можно добиться плавного появления или изменения цвета объекта. Чтобы создать анимацию движения цветового эффекта для классического текста, преобразуйте текст в символ.
- Свойства фильтров (фильтры нельзя применять к графическим символам)
Создание анимации движения
Анимацию движения можно создать одним из трех способов:
- Создайте графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши кадр и выберите Создать анимацию движения.
- Выберите графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши кадр и выберите Вставка > Анимация движения.
- Создайте графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши экземпляр в рабочей области и выберите Создать анимацию движения.
Использовать ActionScript в анимации необязательно.
Анимация движения других свойств с помощью инспектора свойств
Используйте команду Создать анимацию движения, чтобы анимировать большинство свойств экземпляра символа или текстового поля. К таким свойствам относятся, например, поворот, масштабирование, прозрачность или оттенок (только для символов и текста TLF). Например, можно изменить свойство альфа-прозрачности экземпляра символа, чтобы он плавно появлялся на экране.
Выделите экземпляр символа или текстовое поле в рабочей области.
Если выделенный фрагмент содержит другие объекты или содержит несколько объектов из слоя, то Animate предлагается преобразовать его в символ фрагмента ролика.
Выберите Вставка > Анимация движения.
Если появится диалоговое окно Преобразовать выделенный фрагмент в символ для анимации, нажмите кнопку «ОК» для преобразования выделенного фрагмента в символ фрагмента ролика. Когда анимация движения применяется к объекту, который существует только в одном кадре, точка воспроизведения перемещается в последний кадр новой анимации движения. В противном случае точка воспроизведения не перемещается.
Поместите точку воспроизведения в кадр диапазона анимации, для которого необходимо указать значение свойства.
Точку воспроизведения можно поместить в любой другой кадр диапазона анимации. Анимация движения начинается со значений свойства в первом кадре диапазона анимации, который всегда является ключевым кадром свойств.
Выберите объект в рабочей области и установите значение свойства, не относящегося к положению (например, альфа-прозрачности, поворота или наклона). Задайте значение при помощи инспектора свойств или одного из средств панели Инструменты.
Текущий кадр в диапазоне становится ключевым кадром свойств.
Можно отобразить различные типы ключевых кадров свойств в диапазонах анимации. Щелкните правой кнопкой мыши (Windows) или щелкните, удерживая клавишу Ctrl (Macintosh), по диапазону анимации и выберите в контекстном меню «Просмотреть ключевые кадры» > тип свойства.
Проведите точкой воспроизведения по временной шкале , чтобы просмотреть анимацию движения в рабочей области.
Чтобы добавить дополнительные ключевые кадры свойств, переместите точку воспроизведения в нужный кадр диапазона и установите значение свойства в инспекторе свойств.
Добавление анимации движения в существующий слой анимации
В существующий слой анимации можно добавить дополнительную анимацию движения. Добавляйте дополнительные анимации движения, чтобы использовать меньшее количество слоев при создании содержимого Animate с анимацией.
Выполните одно из следующих действий.
- Добавьте пустой ключевой кадр в слой (Вставка >Временная шкала >Пустой ключевой кадр), добавьте элементы в ключевой кадр, а затем добавьте анимацию для элементов.
- Создайте анимацию движения в отдельном слое, а затем перетащите диапазон на нужный слой.
- Перетащите статические кадры из другого слоя в слой анимации, а затем добавьте анимацию движения к объекту в статическом кадре.
- Перетащите существующий диапазон, удерживая клавишу «Alt» (Windows) или «Option» (Macintosh), чтобы создать его дубликат в том же или в другом слое.
- Скопируйте и вставьте диапазон анимации из того же или другого слоя.
Источник: helpx.adobe.com
Разбор: зачем нужны анимации на сайтах + 7 полезных инструментов и библиотек для их создания
Анимации в вебе полезны в большом количестве ситуаций. В этом материале мы разберем, зачем конкретно они нужны, и какие инструменты создания анимированных сайтов стоит использовать в 2020 году.
Зачем нужны анимации на сайтах: повышение конверсии, сторителлинг, оптимизация
На сайте анимации могут решать целый ряд конкретных задач. Одна из них – заполнение времени, которое пользователю нужно ждать загрузки страницы. Смотреть на статичную страницу не так интересно, как на красивую анимацию. В итоге те пользователи, которые могли бы покинуть сайт, остаются на нем – и как результат растет конверсия.
Также анимации могут быть использованы для приветствий и создания нужного настроения – для этого, например, подходят фоновые видео. Помимо этого, анимации отлично подходят для сторителлинга – с их помощью можно быстро рассказать историю или показать работу продукта без большого количества картинок и текста.
Еще одная важная задача анимаций – они делают сайт более удобным для пользователя, оптимизируют взаимодействия с веб-страницей. Например, карусель с изображениями куда удобнее, чем длинный список картинок с подписями. В свою очередь, анимированные боковые меню могут давать возможность сразу получить больше информации, например, о товаре, без необходимости скроллить.
Ну и конечно, анимации отлично подходят для предоставления визуальной обратной связи пользователям – всевозможные предупреждения, сообщения об ошибках становятся более заметными и понятными.
С основными сценариями использования анимаций разобрались, теперь давайте перейдем к обзору полезных инструментов для их создания.
Slides: фреймворк для создания анимаций без кода
Этот сервис с бесплатной версией помогает создавать целые анимированные сайты. Он позволяет разрабатывать анимированные шаблоны буквально за минуты. Работает это так – пользователь может собирать свой анимированный дизайн с помощью библиотеки готовых элементов. К примеру, фреймворк включает в себя такие элементы:
- панели
- слайдеры
- диалоговые окна
- сайдбары
- выпадающие меню
- контактные формы
- навигационные элементы
- поп-апы
- кнопки
Express Animate: создание видео-анимаций
Этот инструмент позволяет генерировать анимации и специальные эффекты для видео. Затем эти видео можно встраивать на веб-страницы. Проекты можно экспортировать в формате HTML5, flash или GIF. С помощью этого инструмента можно создавать специальные элементы
Koolmoves: создание анимаций и перекодирование flash
Этот инструмент позволяет создавать HTML5-анимации для наложения эффектов на изображение, анимирования элементов навигации, создания слайд-шоу и т.п. Конечный результат можно экспортировать в HTML5, GIF, MP4/AVI. Также Koolmoves позволяет конвертировать flash-анимации в более современные форматы.
AnimateMate: плагин для Sketch
Sketch – мощный инструмент, иногда даже слишком. Это очень ощущается в ситуациях, когда нужно создать простую анимацию и не тратить на это много времени. С помощью этого плагина можно быстро создавать простые анимации и экспортировать их прямо из Sketch.
Теперь рассмотрим еще несколько библиотек, которые хорошо решают узконаправленные задачи в деле создания анимаций.
WAIT! Animate: создание пауз в CSS-анимациях
Этот инструмент решает конкретную задачу – расчет идеальной паузы между завершением анимации и ее повторным стартом. CSS не дает простых способов сделать такую паузу, поэтому WAIT! Animate оказывается неожиданно полезным инструментом.
Granim.js: работа с градиентами в анимациях
Эта JS-библиотека позволяет создавать красивые интерактивные анимации. Отлично подходит для создания фоновых изображений с меняющимся градиентом.
iTyped: анимация текстов
Еще одна JavaScript-библиотека, которая красиво анимирует процесс печати. При этом здесь нет никаких лишних зависимотей, что облегчает ее использование.
Заключение
Анимации в вебе не только служат для улучшения внешнего вида сайта. Они выполняют множество конкретных задач, которые облегчают жизнь пользователям, повышают качество взаимодействия с сайтом и, как следствие, конверсию. Грамотное использование анимаций с помощью подходящих инструментов может стать отличным решением, которые позволит улучшить результативность вашего сайта.
Знаете какие-то еще полезные инструменты для работы с анимациями в вебе? Оставляйте ссылки в комментариях.
- Разработка веб-сайтов
- Работа с векторной графикой
- Компьютерная анимация
- Интернет-маркетинг
- Дизайн
Источник: habr.com