Добавьте подвижной динамики в свои прототипы.
Начните с нуля или загрузите практические файлы [https://learndownload.adobe.com/pub/l…], чтобы начать. Выполните действия описанные ниже.
Нарисуйте контуры для анимации:
1. Откройте документ .xd или используйте скаченный (animated-prototype.xd).
2. Нажмите на название монтажной области, затем удерживайте alt (или option) на клавиатуре + перетаскивание, чтобы дублировать оригинал монтажной области.
Совет: В процессе анимации объектов в Adobe XD, используйте одинаковые названия слоёв. Дублирование монтажной области, также дублирует названия слоёв.
3. Дважды щёлкните по одной из волнистых линий, чтобы преобразовать её в контур. Перетащите каждую точку, чтобы изменить форму контура. Повторите это же действие с каждой из трёх волнистых линий.
4. Продублируйте обновленную монтажную область и отредактируйте контур волнистых линий на новой монтажной области. В общей сложности, у вас должно получиться 3 монтажные области.
Анимируйте контуры:
1. Перейдите в режим Prototype и нажмите на название 1-й монтажной области, чтобы выбрать её.
2. Перетащите соединитель из синей стрелки на вторую монтажную область и выберите следующие настройки:
- Trigger = Time
- -Delay = 0s
- Action = Auto-Animate
3. Перетащите соединитель от 2-й монтажной области к 3-й монтажной области. XD запоминает предыдущие настройки, поэтому, менять вам, ничего не нужно.
4. Перетащите соединитель с 3-й монтажной области обратно на 1-ю, чтобы создать зацикленную анимацию.
5. Выберите Desktop Preview (Предварительный просмотр рабочего стола), Cmd+return или Ctrl+Enter, чтобы проверить свой прототип.
Вот и всё!
