Как создать анимированный прототип в Adobe XD CC


Добавьте подвижной динамики в свои прототипы.

 

Начните с нуля или загрузите практические файлы [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, чтобы проверить свой прототип.

Вот и всё!