Используйте действия Show element и Hide element, чтобы показывать или скрывать элемент без использования условной видимости.

• Триггер определяет, что вызывает появление или исчезновение элемента — нажатие кнопки или смена экрана.
• Задержка определяет промежуток времени между триггером и применением действия.
• Анимация определяет визуальный эффект (по умолчанию: Fade in / out).

Показывать или скрывать элемент

По умолчанию каждый элемент на экране появляется при открытии экрана и остаётся видимым, пока пользователь не уйдёт с него. Действия Show element и Hide element позволяют управлять тем, когда и как элемент появляется или исчезает. Например, можно:

• Показывать кнопку закрытия через несколько секунд после открытия экрана.
• Плавно выводить заголовок, а не показывать его сразу.
• Скрывать подсказку, когда пользователь нажимает на иконку закрытия.

Триггеры

Каждый триггер срабатывает в определённый момент:

Момент	Триггер	Добавить к
Экран открывается	On Screen Appear	Любому элементу на экране, даже тому, который показывает это действие
Пользователь нажимает	On Tap	Любому видимому элементу, который нажимает пользователь, например кнопке
Видео заканчивается	On Playback Finished	Видео
Таймер обратного отсчёта заканчивается	On Timer End	Таймеру, у которого Visibility установлена в Show, чтобы триггер сработал
Пользователь изменяет или отправляет поле ввода	On Changed или On Submit	Полю ввода

Настройка

Шаги одинаковы для каждого триггера:

1. Выберите нужный элемент таблицы, например кнопку.
2. На панели Interactions добавьте триггер с действием Show element или Hide element.
3. В выпадающем списке Elements выберите, что нужно показать или скрыть.
4. Выберите каждый элемент из шага 3 и откройте панель Design. Если действие показывает элемент, установите Visibility в значение Hide; если скрывает — в значение Show. Если несколько действий изменяют его, руководствуйтесь этим правилом для того действия, которое выполняется первым. Действие Show element не влияет на уже видимые элементы. Чтобы позже отредактировать скрытый элемент, выберите его на панели Layers — на холсте он не отображается.
5. Чтобы увидеть результат, протестируйте флоу на устройстве. На холсте действия не выполняются. На устройстве скрытый элемент не занимает места, поэтому окружающий контент перемещается при его появлении и после исчезновения.

Следуйте приведённым выше шагам, чтобы настроить действие Show element или Hide element. Затем измените его параметры:

• Delay — показать элемент через несколько секунд после открытия экрана
• Animation — анимировать появление или исчезновение элемента

Показать элемент через несколько секунд после открытия экрана

Поле Delay задаёт, сколько времени действие ждёт после срабатывания триггера (до 5000 мс). Например, чтобы показать кнопку закрытия через три секунды после открытия экрана, используйте триггер On Screen Appear и установите Delay в 3000 мс. Указывайте целые секунды: на iOS задержка округляется до целой секунды.

Чтобы увидеть задержку, протестируйте флоу на устройстве: окно Edit action её не отображает.

Для задержки дольше 5 секунд покажите элемент по окончании таймера обратного отсчёта.

Анимация при появлении и исчезновении элемента

В окне Edit action доступны следующие настройки анимации:

Настройка	Что меняет
Animation	Как элемент появляется или исчезает: None, Fade in или Fade out, Rise или Pop
Easing	Как меняется скорость во время анимации: Linear, Ease in, Ease out или Ease in-out
Duration	Как долго длится анимация, до 5000 мс
Distance	Для Rise: на сколько пикселей перемещается элемент, 1–200 px
Start scale	Для Pop: минимальный размер элемента, 0.1–0.99 от его полного размера

Окно Edit action воспроизводит превью анимации в цикле. Пользователь может нажать на элемент только после того, как он полностью появился, поэтому для кнопки рекомендуется задавать небольшую Duration.

Если действие затрагивает несколько элементов, они анимируются одновременно. Чтобы элементы появлялись один за другим, добавьте отдельное действие для каждого элемента, увеличивая значение Delay для каждого следующего.

Когда анимация и задержка не работают

В трёх случаях Animation и Delay не имеют эффекта:

• Элемент с условной видимостью: действия, нацеленные на этот элемент, показывают или скрывают его мгновенно. Чтобы добавить анимацию или задержку, уберите условие: установите Visibility в значение Show или Hide.
• Переиспользуемый компонент: элемент внутри компонента или любой объект действия внутри него появляется и исчезает мгновенно.
• Нижний лист: шторка открывается и закрывается с собственной анимацией, без задержки.

Во всех трёх случаях окно Edit action по-прежнему показывает Animation и Delay, и при публикации предупреждение не появляется.