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

Анимирование прототипов

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

С помощью функции автоматического анимирования можно создавать иммерсивные переходы, чтобы визуализировать движение содержимого между монтажными областями.

В сочетании с триггерами перетаскивания и времени это позволяет создавать широкий спектр эффектов, таких как проведение пальцем и перетаскивание в YouTube для более качественного изложения истории прототипа.

Цепная реакция взаимодействий на веб-сайте
Цепная реакция на веб-сайте

Эффект проведения пальцем и перетаскивания на сенсорном устройстве
Эффект проведения пальцем и перетаскивания на сенсорном устройстве

Чтобы создать анимированный прототип, выполните следующие действия:

  1. Прежде чем начать, изучите эти простые правила обработки объекты во время анимации:

    • Если объект отсутствует в монтажной области назначения, он постепенно становится более четким на экране.
    • Если объект отсутствует в исходной монтажной области, его яркость постепенно приглушается.
    • Если у объекта есть совпадение как по имени слоя, так и по группе, к которой он принадлежит, его атрибуты анимируются. Полный список поддерживаемых свойств и переходов можно прочитать в разделе Свойства объекта.
    • Если хотите создать прототип эффекта горизонтальной или вертикальной прокрутки, используйте группы прокрутки.
  2. Соедините монтажные области в режиме прототипа. 

  3. Щелкните соединитель, чтобы открыть панель взаимодействий, которая появляется в инспекторе свойств, и задайте следующие параметры:

    • Триггер: выберите параметр для запуска анимации. Например, чтобы смоделировать событие касания карты, выберите Нажатие. 
    • Действие: выберите Автоматическое анимирование. Теперь вы можете назначить два действия на один триггер, например нажатие. Для этого установите для первой кнопки + Действие в инспекторе свойств параметр Переход, Автоматическое анимирование, Наложение, Прокрутка к или Предыдущая монтажная область, затем установите для второй кнопки + Действие непереходный параметр, например Автоматическое воспроизведение или Воспроизведение речи. Обратите внимание, что если в качестве первого действия вы выбрали воспроизведение звука или речи, вы не сможете добавить второе действие.
    • Место назначения: выберите монтажную область назначения для перехода анимации.
    • Смягчение: выберите этот параметр, чтобы смоделировать эффекты смягчения. Например, выберите Ускорение, если нужно, чтобы анимация постепенно уходила из прототипа.
    Процесс автоматического анимирования
    Процесс автоматического анимирования

    A. Выберите тип триггера B. Выберите действие для автоматического анимирования C. Выберите монтажную область назначения D. Выберите эффекты смягчения 

  4. Чтобы задать больше взаимодействий для объекта, выберите объект с уже определенным взаимодействием и щелкните кнопку + в монтажной области. Помимо этого, вы можете нажать + в инспекторе свойств.

     Не забывайте, что триггеры «Нажатие», «Перетаскивание», Наведение и Время можно использовать только один раз, а ГолосКлавиши и геймпад можно использовать много раз. 

  5. Выберите  , чтобы просмотреть свои анимации в поддерживаемых браузерах

     Помните, что XD не поддерживает прокрутку при предварительном просмотре автоматически анимированных монтажных областей.

Примеры и образцы файлов

Подробнее

Чтобы узнать больше об автоматическом анимировании в XD, посмотрите это видео.
Время просмотра: 6 минут

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

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