Adobe XD: как использовать функцию автоанимации

Создавайте простые анимации и эффекты перехода с помощью Adobe XD.

Взаимодействия смахивания — одно из наиболее часто используемых микровзаимодействий в мобильных приложениях. В этом примере рассмотрим музыкальный плейлист. Для первого артборда мы собираемся создать экран плейлиста с пятью песнями. Каждая песня представляет собой отдельную карточку, и по сути, когда каждая карточка смахивается влево, она должна удалить песню из списка воспроизведения. Когда карточка смахивается вправо, она должна добавить песню в очередь.

Приступим и создадим первую карточку. Вы можете добавить основные данные, такие как название песни, имя исполнителя, продолжительность песни и рейтинг. Теперь сгруппируйте все эти элементы в один слой. Дублируйте его, пока не сделаете пять одинаковых карточек. Вы можете редактировать их по своему вкусу.

Для первой карты — C1 — мы добавим левый свайп для удаления. Итак, давайте создадим небольшой квадрат с красным фоном, добавим текст для удаления и значок, как показано на скриншоте ниже. Сгруппируйте все эти элементы в слой под названием A1. Теперь объедините C1 и A1 в слой L так, чтобы A1 находился справа от C1.

Создайте вторую карту

Для второй карты — C2 — мы собираемся добавить действие смахивания вправо в очередь аналогичным образом. Создайте группу A2 со значком, текстом и зеленым фоном. Добавьте его слева от группы C2 и создайте комбинированный слой с именем L2. Теперь первая монтажная область (S1) готова. Давайте дважды продублируем весь артборд в двух состояниях — S2 и S3. Мы будем использовать S2 для удаления смахивания и S3 для добавления в очередь смахивания. Для этого нам нужно внести некоторые изменения для каждого из этих артбордов. Вот настройки для обоих свайпов:

• S1 — Измените непрозрачность A1 и A2 на 0% и расположите L1, L2 так, чтобы они были выровнены по центру.
• S2 — Расположите карту L1 так, чтобы правый край L1 был выровнен с другими картами. Измените непрозрачность A2 на 0%.
• S3 — Расположите карту L2 так, чтобы левый край L2 был выровнен с другими картами. Измените непрозрачность A1 на 0%.

Анимируйте артборды

Теперь, когда монтажные области полностью настроены, следующим шагом будет их анимация. Вы можете сделать это, перейдя в режим прототипа в верхней левой части инструмента. Теперь на монтажной области S1 щелкните слой L1 и добавьте взаимодействие с правой стороны инструмента, установив для триггера значение «Перетащить», «Действие» — «Авто-анимация» и «Назначение» — для монтажной области S2. Вы также можете добавить динамику в зависимости от ваших предпочтений. Протестируйте это взаимодействие, нажав кнопку воспроизведения в правом верхнем углу инструмента. На монтажной области S1 щелкните слой L2 и добавьте аналогичное взаимодействие с теми же настройками, но в данном случае установите Destination на S3. Это взаимодействие создаст левый свайп.

С помощью этих простых действий вы легко улучшите свою работу!