Как создавать, анимировать и тематизировать файлы Lottie в React Native

Поднимите свой UX на новый уровень с помощью анимации Lottie

Lottie - это библиотека, изначально созданная AirBnB для того, чтобы анимации After Effects можно было экспортировать как объекты JSON и воспроизводить на мобильных платформах и в Интернете. Lottie for React Native сейчас особенно популярна: на момент написания статьи ее скачали более 100 000 еженедельно, и на это есть веская причина - библиотека позволяет разработчикам использовать стандартные отраслевые инструменты, которые создают сложные анимации, которые могут выглядеть чрезвычайно впечатляюще. мобильное устройство.

Высокопроизводительная векторная анимация предлагает плавные переходы и деформации формы на уровне вершин, а также другие преимущества, такие как масштабирование и поддержка тем из коробки. Следующая анимация запуска ракеты демонстрирует типичную для Лотти анимацию (правда, в формате GIF качество будет снижено!):

Эти анимации были приобретены для React Native через пакет lottie-react-native, который сейчас получил широкое распространение в сообществе Javascript.

Хотя в более ранних версиях существовала неровная установка, Lottie for React Native, похоже, сгладила свои первые проблемы, связанные с сбоями при установке и предупреждениями, с помощью последней версии React Native 0.63. Автоматическое связывание React Native еще больше упрощает процесс установки, поэтому сейчас самое время познакомиться с библиотекой, чтобы сделать ваши приложения более визуально привлекательными и, в конечном итоге, более увлекательными.

Знакомство с Lottie Files

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

Также была создана торговая площадка Lottie, позволяющая аниматорам продавать высококачественные иллюстрации в формате Lottie, что дает разработчикам возможность отслеживать тенденции и выпускать пакеты анимации. Например, E-Wallet Icon Pack будет иметь отношение к растущей сфере финансовых технологий, тогда как коллекция Covid Safety Tips будет нацелена на приложения для отслеживания и здоровья.

Чтобы облегчить тестирование и совместное использование значков, у нас также есть приложение Lottie Files iOS, которое загружает анимацию прямо на устройство. Можно поменять местами цвета и управлять воспроизведением.

Есть несколько рабочих процессов, которые могут быть адаптированы для получения вашей анимации Lottie от концепции до финальной анимации, которые будут соответствовать различным программным пакетам в зависимости от ваших предпочтительных инструментов:

  • Скетч и плагин AEUX. Sketch - это приложение для визуального прототипирования для Mac, не отличное от Adobe XD. Sketch поддерживает монтажные области или холсты различных стандартизованных размеров с упором на мобильные устройства и содержит полный набор векторных инструментов. Плагин AEUX для Sketch позволяет выбирать графику и напрямую экспортировать ее в After Effects.
  • Подобно рабочему процессу Sketch, Figma также позволяет создавать совместные прототипы с помощью своего решения на основе браузера. AEUX также поддерживает Figma, поэтому, даже если вы хотите экспортировать некоторую графику из раскадровок Figma, AEUX позволит вам экспортировать их для манипуляций с After Effects.
  • Если вы хотите добавить анимацию в существующее приложение, то переделывать весь холст будет излишним. Создавайте свои формы и накладывайте их в пакет для редактирования векторных изображений, например Illustrator.

Естественно, After Effects позволяет напрямую импортировать файлы .ai. У ресурсов Lottie и .ai есть ограничения, но мы будем бороться с этим, преобразовывая эти ресурсы в слои формы - подробнее об этом ниже.

Все вышеперечисленное - это предварительная анимация или подготовка ваших статических векторов к анимации в After Effects. После анимации плагин Lottie Files используется для предварительного просмотра анимации и экспорта ее как объекта JSON.

Lottie не поддерживает все функции After Effects (хотя все, что вам нужно для векторной анимации, совместимо), поэтому возможность предварительного просмотра анимации перед экспортом очень удобна, чтобы убедиться, что она работает должным образом. Ознакомьтесь с таблицей поддерживаемых функций для полной разбивки.

С учетом всего сказанного, давайте теперь резюмируем конкретный вариант использования Lottie Files для приложений React Native, сосредоточенный на том, чтобы сделать ваши значки намного более интересными.

Что покроет этот кусок

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

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

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

Чтобы сделать этот значок более интересным, мы переработаем его как анимацию Lottie. Значок будет заменен следующей анимацией:

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

В этой статье будут рассмотрены методы, используемые для создания этой пользовательской анимации с нуля. Анимация будет экспортирована из After Effects с помощью плагина Lottie Files и импортирована в React Native, где lottie-react-native API будут использоваться для взаимодействия со значком.

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

Цветовые фильтры делают тематические анимации Lottie совместимыми - нет необходимости создавать светлые и темные режимы одной и той же анимации. Конфигурация вашей темы, размещенная в React Native, может быть применена непосредственно к анимации с помощью цветовых фильтров.

Конвейер анимации значков

Adobe Illustrator является отраслевым стандартом в области векторной графики и идеальной отправной точкой для создания нестандартных форм.

Здесь цель состоит в том, чтобы разделить различные компоненты вашей графики, которые необходимо анимировать. В случае с домашней иконой дымоход, крыша и основная часть дома разделены на 3 слоя и названы соответственно:

Графическое изображение можно сохранить как файл Illustrator .ai и импортировать непосредственно в After Effects с помощью Файл - ›Импорт -› Файл…. Как только вы будете довольны своими формами и настройкой слоев, работа Illustrator готова.

Теперь в After Effects при выборе файла для импорта будут представлены некоторые параметры импорта. Обязательно выберите параметр Вид импорта композиции и сопоставьте размеры видеоряда с вашим размером документа.

Выбор типа импорта Видеоряд объединит ваши слои и предотвратит их анимацию.

Двойной щелчок по импортированной композиции покажет отдельные слои и формы в ней:

Преобразование ресурса Illustrator в слой-фигуру

При просмотре слоев вы заметите, что на самом деле это Ai слои, и это проблема для Лотти. Тип ресурса представлен значком слева от имени слоя.

Этот формат Ai становится проблематичным в дальнейшем при экспорте в виде файла Lottie JSON по следующим причинам:

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

Чтобы решить эту проблему, каждый слой можно преобразовать в слой-фигуру. Находясь в этом формате, фигуры будут правильно экспортироваться как легкие векторные представления, как и фигуры. Для этого выберите слои, а затем Создать - ›Создать фигуры из векторного слоя:

Меню "Создать" также можно найти в главном меню в разделе Слой.

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

Вновь созданные слои-фигуры теперь можно анимировать, используя все поддерживаемые функции After Effects, имеющиеся в вашем распоряжении.

Техники анимации выходят за рамки этой статьи, но есть полезный курс, который проводит сама Лотти, в котором излагаются основные инструменты для создания анимации по ключевым кадрам. Есть также бонусные видео, демонстрирующие некоторые более интересные техники анимации, которые полностью поддерживает Lottie - рекомендуется просмотреть этот контент, если вы новичок в After Effects.

Однако здесь мы упомянем, как создать маску и эффект ряби, который применяется к слою с домом.

Эффект маски и ряби

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

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

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

Инструменты «Перо» и «Выделение» используются для добавления вершин и изменения положения и кривизны:

К сожалению, After Effects не позволяет нам перетаскивать фигуры в свойство «Форма маски», поэтому мы можем рисовать форму маски вручную.

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

Окончательная анимация состоит из 18 ключевых кадров. Все состояния анимации присутствуют в этой одной анимации и будут контролироваться в React Native с помощью API Lottie.

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

Сегменты анимации следующие:

  • Фрейм 1: состояние по умолчанию
  • Кадр 2: депрессивное состояние, отображается при нажатии на кнопку. Это будет продемонстрировано с помощью компонента Pressable в следующем разделе.
  • Кадры 3–18. Эффект ряби, когда дом возвращается к своей исходной форме, воспроизводится при нажатии на значок.

Экспорт анимации

Предварительный просмотр и экспорт анимации осуществляется с помощью плагина Lottie Files.

  • Выберите Окно - ›Расширения -› LottieFiles, чтобы открыть плагин в плавающем окне.
  • Выберите композицию, которую хотите экспортировать.
  • Проверьте предварительный просмотр и экспортируйте в облако или на свой компьютер.

Экспортированный файл JSON теперь можно импортировать в компоненты React Native и использовать с Lottie API. В следующем разделе будет описано, как это настроено в React Native.

Lottie в React Native

В соответствии с инструкциями по установке для lottie-react-native добавьте необходимые зависимости в свой проект:

yarn add yarn add lottie-react-native lottie-ios

Каждая анимация встроена с опорой source в компонент <LottieView />:

// embedding a lottie animation in React Native components
...
import LottieView from 'lottie-react-native'
export const LottieAnimation = (props) => 
  <LottieView
    source={require('./lottie/home.json')}
    loop={false}
    autoPlay={false}
    progress={0} 
    style={{ width: 150, height: 150 }}
  />

Вышеупомянутый компонент предотвращает зацикливание и автоматическое воспроизведение значка. Оба эти свойства должны иметь значение true, если ваша анимация представляет собой предварительную загрузку или другую постоянную анимацию, например фоновые эффекты. Свойство progress принимает нормализованное значение 0–1, представляющее, какой кадр должен отображаться в данный момент.

Явный контроль анимации

Анимацией можно управлять с помощью некоторых императивных методов API, прикрепленных к компоненту LottieView, доступ к которым можно получить через ссылку. Поскольку эти примеры относятся к функциональным компонентам, давайте воспользуемся хук useRef и создадим ссылку на анимацию:

// using useRef to control lottie animation
import React, { useRef } from 'react'
import LottieView from 'lottie-react-native'
export const LottieAnimation = (props) => {
  const homeAnimation = useRef();
  const playAnimation = () => {
    homeAnimation.current.play(2, 18);
  }
  const pressAnimation = () => {
    homeAnimation.current.play(0, 1);
  }
  return (
    <LottieView
      source={require('./lottie/home.json')}
      loop={false}
      autoPlay={false}
      progress={0} 
      style={{ width: 150, height: 150 }}
      ref={homeAnimation}
    />
  )
}

Чтобы узнать больше о хуке useRef, обратитесь к моей статье, посвященной этой теме: Реагировать: использование ссылок с хуком useRef.

В приведенном выше коде также определены две функции-обработчики для воспроизведения анимации пульсации (кадры 2–18) и воспроизведения подавленного состояния (кадр 1) при нажатии значка. Компонент LottieView не поддерживает события нажатия, поэтому он должен быть обернутыми такими компонентами, как TouchableOpacity, TouchableHighlight или более новым компонентом Pressable.

Метод reset() сбрасывает прогресс анимации на 0, в противном случае анимация останется на последнем проигранном кадре. Чтобы сбросить анимацию, необходимо вызвать homeAnimation.current.reset().

В отличие от компонентов «Сенсорный», Pressable поддерживает более детальное сенсорное управление с помощью событий onPressIn, onPressOut и onLongPress. Мы будем использовать onPressIn для вызова pressAnimation() для отображения значка в нажатом состоянии и onPress для поведения касания на подставке:

<Pressable
  onPressIn={() => pressAnimation()}
  onPress={() => playAnimation()}
>
  <LottieFiles
    ...
   />
</Pressable>

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

Цветовые фильтры и тематика

Есть еще одно важное соображение, которое мы еще не рассмотрели, и это связано с переключением цветов формы значков, чтобы они совпадали с темой приложения. Это делается с помощью свойства colorFilters LottieView.

Ознакомьтесь со следующим фрагментом, который снабжает эту опору массивом фильтров, чтобы раскрасить каждую форму отдельно. Имейте в виду, что слои значков были размещены в композиции HomeAll в After Effects:

// supplying color filters to a lottie animation
<LottieView
  source={require('../../img/tabs/home.json')}
  ...
   colorFilters={
    [
      {
        keypath: "HomeAll.House",
        color: theme.priBg,
      },
      {
        keypath: "HomeAll.Roof",
        color: theme.darkBg,
      },
      {
        keypath: "HomeAll.Chimney",
        color: theme.priBg,
      },
    ]
  }
/>

keypath соответствует вашей иерархии слоев, установленной в After Effects, а свойство цвета просто ожидает шестнадцатеричное значение. В приведенном выше примере я обратился к своему объекту темы, чтобы получить соответствующие цвета - это будет более вероятный сценарий, чем жесткое кодирование цветов.

Если вы хотите раскрасить все свои фигуры (или подмножество фигур) в один цвет, просто используйте звездочку:

// apply the same colour to all layers within `HomeAll`
colorFilters={[
  {
    keypath: "HomeAll.*",
    color: theme.secBg,
  }
]}

Цветовые фильтры эффективны, когда вы или ваша команда создали анимацию внутри компании, но могут быть неудобными при получении анимации из Lottie Files, качество которой варьируется по всей коллекции.

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

Если ваши цветовые фильтры не работают, проверьте "nm" свойства файла JSON. Эти свойства содержат имена слоев и дают вам некоторое представление о структуре анимации:

На этом мы завершили реализацию анимации нашей домашней иконки! Теперь у читателя будет хорошее представление о процессе создания анимации Lottie и о том, как начать работу с собственной.

В сводке

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

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

Также была рассмотрена React Native сторона Lottie, где наша экспортированная домашняя анимация была встроена в компонент React Native и управлялась с помощью компонента Pressable и императивных методов API компонента LottieView. Также были рассмотрены цветные фильтры - механизм, с помощью которого вы можете передавать цвета заливки каждой из ваших анимационных фигур. Это очень полезно при тематизации ваших приложений.