Руководство пользователя Отмена

Работа с анимацией Lottie

Узнайте, как импортировать и использовать Lottie для создания анимации в Adobe XD.

Lottie — это облегченный формат анимации, который можно экспортировать из Adobe After Effects как файлы JSON. Файлы Lottie меньше по размеру по сравнению с такими форматами, как анимированные GIF и PNG. Разработчики могут повторно использовать файлы Lottie в своем коде.

Импорт файлов Lottie и выбор варианта воспроизведения
Импорт файлов Lottie и выбор варианта воспроизведения

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

Рекомендуемое чтение

Импорт файлов Lottie

Чтобы импортировать файл Lottie в XD, перетащите его на монтажную область. Или выберите Файл > Импорт.

После импорта первый кадр Lottie отображается на холсте. Если первый кадр Lottie пустой, на холсте отображается пустой кадр. В таких случаях используйте панель «Слои», чтобы найти Lottie. 

Если выбрать Lottie в режиме «Проект», вы увидите значок воспроизведения   в левом верхнем углу.

Настройка параметров воспроизведения

Настройте параметры воспроизведения для Lottie
Настройте параметры воспроизведения для Lottie

После импорта вашего файла Lottie в XD выберите, когда он должен воспроизводиться. Выполните действия, описанные ниже, чтобы задать режим воспроизведения.

  1. В режиме «Проект» выберите ресурс Lottie на холсте.
  2. В разделе Анимации в инспекторе свойств выберите один из предустановленных параметров воспроизведения, описанных ниже.
  3. Если нужно, чтобы файл Lottie воспроизводился в зацикленном режиме, нажмите кнопку «Циклическое воспроизведение» .

Параметры воспроизведения и соответствующие взаимодействия

Когда вы настраиваете параметры воспроизведения для Lottie в режиме «Проект», соответствующие взаимодействия автоматически устанавливаются в режиме «Прототип».

Воспроизводить автоматически

При выборе функции Воспроизводить автоматически триггер Время автоматически принимает значение времени отображения в 0 секунд.

Воспроизводить автоматически — Режим проектирования

Воспроизводить автоматически — Режим прототипа

Воспроизведение касанием

Если выбрать параметр Воспроизведение касанием, то триггер Касание автоматически принимает значение действия по умолчанию Переключить воспроизведение / пауза.

Воспроизведение касанием — Режим проектирования

Воспроизведение касанием — Режим прототипа

Не воспроизводить

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

Настройка воспроизведения Lottie

Чтобы настроить воспроизведение, выберите «Изменить воспроизведение».
Чтобы настроить воспроизведение, выберите «Изменить воспроизведение».

Чтобы настроить воспроизведение Lottie, в разделе Анимации в инспекторе свойств выберите Изменить воспроизведение.

При выборе функции Редактировать проигрывание вы автоматически переключаетесь на режим «Прототип».

В режиме «Прототип» выберите одну из настроек, описанных ниже.

Выберите один из следующих триггеров: Время (настройте параметр Задержка на время, превышающее 0 секунд), Клавиши и геймпад или Голосовая команда.

Настройте воспроизведение, выбрав триггер «Время» с параметром «Задержка» на время, превышающее 0 секунд.
Выберите триггер «Время» с параметром «Задержка», значение которого не превышает 0 секунд.

Измените действие триггера воспроизведения Lottie Касание с переключателя Воспроизведение/пауза на Воспроизвести или Пауза.

Настройте воспроизведение, выбрав триггер «Касание» с действием «Воспроизвести» или «Пауза».
Настройте воспроизведение, выбрав триггер «Касание» с действием «Воспроизвести» или «Пауза».

Воспроизведение Lottie с другими взаимодействиями

Lottie с триггером окончания воспроизведения и переходом на монтажную область
Lottie с триггером окончания воспроизведения и переходом на монтажную область

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

  • Установите триггер «Окончание воспроизведения» для Lottie, чтобы он запускал действие после воспроизведения файла.
  • Воспроизводите несколько файлов анимации Lottie автоматически одновременно (максимум 20).
  • Воспроизводите анимации Lottie с видео одновременно.

Подробнее о создании прототипов в XD см. в разделе Создание интерактивных прототипов.

Примеры прототипирования

Теперь, когда вы узнали, как установить параметр воспроизведения для вашего файла Lottie и связать его с другими взаимодействиями, давайте попробуем несколько примеров.

Загрузить образцы файлов

Пример 1. Анимация экрана загрузки

Узнайте, как анимировать экран загрузки с помощью Lottie.

Ex 1-artboard 1

  1. В режиме «Проектирование» импортируйте файл plant-loading.json и поместите на монтажную область. Установите автоматическое воспроизведение.
  2. В режиме прототипа соедините файл Lottie с Ex 1-artboard 2 и установите для него триггер окончания воспроизведения с типом действия «Переход».

Когда вы завершите связывание взаимодействий, просмотрите прототип и проверьте взаимодействия.

Пример 2. Анимация выбора меню

Узнайте, как анимировать элементы меню, когда они выбраны.

Ex 2-artboard 1

  1. В режиме «Проектирование» импортируйте файлы растения 1 (мята колосистая) и растения 2 (сансевиерия) и поместите их в соответствующие контейнеры. Задайте для них режим «Не воспроизводить».
  2. В режиме прототипа выполните действия, описанные ниже.
  • Подключите файл растения 1 и его контейнер к Ex 2-artboard 2.
  • Подключите файл растения 2 и его контейнер к Ex 2-artboard 3.

Установите для них триггер касания с типом действия «Переход».

Ex 2-artboard 2

В режиме «Проектирование» создайте копию файла растения 1 и разместите его на монтажную область. Задайте для него автоматическое воспроизведение.

Ex 2-artboard 3

В режиме «Проектирование» создайте копию файла растения 2 и разместите его на монтажную область. Задайте для него автоматическое воспроизведение.

Когда вы завершите связывание взаимодействий, просмотрите прототип и проверьте взаимодействия.

Дополнительные примеры

Ознакомьтесь с другими примерами, включающими видео, анимацию Lottie и состояния компонентов.

Предварительный просмотр и совместное использование вашего прототипа

Предварительный просмотр прототипа в приложении, на мобильном устройстве или в браузере
Предварительный просмотр прототипа в приложении, на мобильном устройстве или в браузере

Когда ваш проект будет готов для совместного использования с заинтересованными лицами, задайте права доступа и опубликуйте ссылку на прототип или спецификации проекта и предоставьте к ней доступ.

Подробнее

Посмотрите это 2-минутное видео, чтобы узнать несколько советов по работе с Lottie в XD.

Текущие ограничения

  • Вы можете импортировать файлы Lottie в XD объемом менее 15 МБ. Нет никаких ограничений по количеству файлов Lottie, которые могут быть в одном документе XD.
  • Файлы Lottie не будут запускаться автоматически, если для видео задан режим автоматического воспроизведения.
  • Файлы Lottie будут отключаться при запуске других триггеров прототипирования.
  • Если в анимации Lottie используется шрифт для настольного ПК, этот шрифт не будет отображаться при воспроизведении в Интернете.
  • Невозможно переопределить файл Lottie в режиме Повторяющаяся сетка.
  • Вы не можете импортировать анимацию Lottie, ссылающуюся на внешний ресурс, например изображение.
  • Вы не можете импортировать файл JSON, который не является Lottie JSON.

Связанные ресурсы

Есть вопрос или идея?

обратитесь за помощью в сообщество

Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!

Получайте помощь быстрее и проще

Новый пользователь?