Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!
Последнее обновление
28 февр. 2025 г.
Примечание
С июля 2023 года плагин LottieFiles для Adobe XD больше не поддерживается.
Узнайте, как импортировать и использовать Lottie для создания анимации в Adobe XD.
Lottie — это облегченный формат анимации, который можно экспортировать из Adobe After Effects как файлы JSON. Файлы Lottie меньше по размеру по сравнению с такими форматами, как анимированные GIF и PNG. Разработчики могут повторно использовать файлы Lottie в своем коде.
XD позволяет импортировать файлы Lottie и контролировать параметры воспроизведения Lottie. После настройки воспроизведения Lottie и подключения вашего прототипа вы можете просмотреть его, перед тем как опубликовать.
Рекомендуемое чтение
Импорт файлов Lottie
Чтобы импортировать файл Lottie в XD, перетащите его на монтажную область. Или выберите Файл > Импорт.
После импорта первый кадр Lottie отображается на холсте. Если первый кадр Lottie пустой, на холсте отображается пустой кадр. В таких случаях используйте панель «Слои», чтобы найти Lottie.
Если выбрать Lottie в режиме «Проект», вы увидите значок воспроизведения в левом верхнем углу.
После импорта вашего файла Lottie в XD выберите, когда он должен воспроизводиться. Выполните действия, описанные ниже, чтобы задать режим воспроизведения.
- В режиме «Проект» выберите ресурс Lottie на холсте.
- В разделе Анимации в инспекторе свойств выберите один из предустановленных параметров воспроизведения, описанных ниже.
- Если нужно, чтобы файл Lottie воспроизводился в зацикленном режиме, нажмите кнопку «Циклическое воспроизведение» .
Параметры воспроизведения и соответствующие взаимодействия
Когда вы настраиваете параметры воспроизведения для Lottie в режиме «Проект», соответствующие взаимодействия автоматически устанавливаются в режиме «Прототип».
При выборе функции Воспроизводить автоматически триггер Время автоматически принимает значение времени отображения в 0 секунд.
Если выбрать параметр Воспроизведение касанием, то триггер Касание автоматически принимает значение действия по умолчанию Переключить воспроизведение / пауза.
При выборе функции Не воспроизводить все взаимодействия устанавливаются в режиме «Прототип».
Настройка воспроизведения Lottie
Чтобы настроить воспроизведение Lottie, в разделе Анимации в инспекторе свойств выберите Изменить воспроизведение.
При выборе функции Редактировать проигрывание вы автоматически переключаетесь на режим «Прототип».
В режиме «Прототип» выберите одну из настроек, описанных ниже.
Выберите один из следующих триггеров: Время (настройте параметр Задержка на время, превышающее 0 секунд), Клавиши и геймпад или Голосовая команда.
Измените действие триггера воспроизведения Lottie Касание с переключателя Воспроизведение/пауза на Воспроизвести или Пауза.
Воспроизведение Lottie с другими взаимодействиями
После того как вы выбрали вариант воспроизведения для Lottie, изучите возможность подключения его к другим взаимодействиям.
- Установите триггер «Окончание воспроизведения» для Lottie, чтобы он запускал действие после воспроизведения файла.
- Воспроизводите несколько файлов анимации Lottie автоматически одновременно (максимум 20).
- Воспроизводите анимации Lottie с видео одновременно.
Подробнее о создании прототипов в XD см. в разделе Создание интерактивных прототипов.
Примеры прототипирования
Теперь, когда вы узнали, как установить параметр воспроизведения для вашего файла Lottie и связать его с другими взаимодействиями, давайте попробуем несколько примеров.
Попрактикуйтесь в создании анимации Lottie, используя примеры файлов.
Узнайте, как анимировать экран загрузки с помощью Lottie.
Ex 1-artboard 1
- В режиме «Проектирование» импортируйте файл plant-loading.json и поместите на монтажную область. Установите автоматическое воспроизведение.
- В режиме прототипа соедините файл Lottie с Ex 1-artboard 2 и установите для него триггер окончания воспроизведения с типом действия «Переход».
Когда вы завершите связывание взаимодействий, просмотрите прототип и проверьте взаимодействия.
Узнайте, как анимировать элементы меню, когда они выбраны.
Ex 2-artboard 1
- В режиме «Проектирование» импортируйте файлы растения 1 (мята колосистая) и растения 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
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.
