Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!
Последнее обновление
16 февр. 2022 г.
- Руководство пользователя Adobe XD
- Введение
- Новые возможности Adobe XD
- Распространенные вопросы
- Создание дизайна, прототипов и совместная работа в Adobe XD
- Управление цветом
- Системные требования
- Основные сведения о рабочей среде
- Изменение языка приложения в Adobe XD
- Доступ к наборам для дизайна пользовательского интерфейса
- Доступность в Adobe XD
- Сочетания клавиш
- Советы и рекомендации
- Дизайн
- Монтажные области, направляющие и слои
- Фигуры, объекты и путь
- Выделение, изменение размера и поворот объектов
- Перемещение, выравнивание, распределение и упорядочивание объектов
- Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
- Задание обводки, заливки и теней для объектов
- Создание повторяющихся элементов
- Создание перспективных проектов с помощью 3D-преобразований
- Редактирование объектов с помощью логических операций
- Текст и шрифты
- Компоненты и состояния
- Маскировка и эффекты
- Макет
- Видео и анимации Lottie
- Создание прототипа
- Создание интерактивных прототипов
- Анимирование прототипов
- Свойства объекта, которые поддерживаются при автоматическом анимировании
- Создание прототипов с клавиатуры и геймпада
- Создание прототипов с помощью голосовых команд и воспроизведения
- Создание синхронизированных переходов
- Добавление наложений
- Создание голосовых прототипов
- Создание якорных ссылок
- Создание гиперссылок
- Предварительный просмотр проектов и прототипов
- Публикация, экспорт и проверка
- Публикация выбранных монтажных областей
- Предоставление совместного доступа к проектам и прототипам
- Настройка разрешений на доступ к ссылкам
- Работа с прототипами
- Просмотр прототипов
- Работа со спецификациями дизайна
- Предоставление общего доступа к спецификациям дизайна
- Проверка спецификаций дизайна
- Навигация в спецификациях дизайна
- Проверка и комментирование спецификаций дизайна
- Экспорт ресурсов дизайна
- Экспорт и загрузка ресурсов из спецификаций дизайна
- Корпоративный групповой совместный доступ
- Резервное копирование или перенос ресурсов XD
- Системы дизайна
- Системы дизайна с библиотеками Creative Cloud Libraries
- Работа с ресурсами документа в Adobe XD
- Работа с библиотеками Creative Cloud Libraries в Adobe XD
- Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
- Работа с проектными токенами
- Использование ресурсов из библиотек Creative Cloud Libraries
- Облачные документы
- Интеграция и плагины
- Работа с внешними ресурсами
- Работа с ресурсами проекта из Photoshop
- Копирование ресурсов из Photoshop
- Как импортировать или открыть проекты Photoshop
- Работа с ресурсами Illustrator в Adobe XD
- Импортирование и открытие проектов Illustrator
- Копирование векторных объектов из Illustrator в XD
- Плагины для Adobe XD
- Создание плагинов и управление ими
- Интеграция Jira с XD
- Подключаемый модуль Slack для XD
- Подключаемый модуль Zoom для XD
- Публикация работы из XD на Behance
- XD для iOS и Android
- Устранение неполадок
- Выявленные неполадки и исправленные ошибки
- Установка и обновления
- Запуск и сбой
- Облачные документы и библиотеки Creative Cloud Libraries
- Прототип, публикация и обзор
- Импорт, экспорт и работа с другими приложениями
Узнайте, как импортировать и использовать 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 MAX
— творческая конференция
С 14 по 16 октября очно в Майами-Бич и онлайн
Adobe MAX
Творческая конференция
С 14 по 16 октября очно в Майами-Бич и онлайн