2 - Анимации

Анимации

Quant-UX поддерживает два типа анимаций. Анимации виджетов изменяют стиль виджета в зависимости от действий пользователя. Например, вы можете задать цвет при наведении на кнопку или цвет ошибки для текстового поля. Кроме того, вы можете создавать анимации экранов, которые отображаются после загрузки экрана. К ним относятся входные анимации, такие как эффекты скольжения, а также более сложные анимации, определённые для каждого виджета.

https://youtu.be/_47HCDPKa4g

Анимации виджетов

Чтобы добавить анимацию к виджету, выберите виджет. Если виджет поддерживает анимации, в правом нижнем углу вы увидите панель вкладок с различными состояниями виджета, например, «Обычное» (Normal) и «Наведение» (Hover). Обратите внимание, что это видно только в представлении дизайна (Design view).

Если вы выберете «Наведение» (Hover), панель свойств изменится и покажет только те свойства, которые можно изменить для состояния наведения. Измените фон или цвет текста. При запуске симулятора выбранный цвет будет отображаться, когда вы наведёте курсор мыши на виджет.

Анимации экранов

Прежде чем создавать анимацию экрана, необходимо установить связь между источником (виджетом или экраном) и целевым экраном. После создания связи выберите исходный элемент. На панели свойств в разделе «Действие» (Action) вы можете нажать кнопку «Без анимации» (No Animation). Появится всплывающее окно, в котором можно определить, как будет анимирован новый экран, например, будет ли он затухать или скользить. Также можно настроить продолжительность и функцию смягчения (easing function).

Вы также можете создать специальные анимации загрузки, которые будут анимировать каждый виджет отдельно. Выберите экран и нажмите кнопку «Анимация» (Animation). Появится редактор анимаций, который позволяет задать для каждого виджета временную шкалу анимации. Вы можете установить начало и конец анимации. Нажмите на значок, чтобы выбрать тип анимации.

Обратите внимание, что тип анимации «Трансформация» (Transform) работает только в том случае, если на первом экране есть элемент с таким же именем. Анимация преобразует предыдущий виджет (положение и стиль) в текущий.

Трансформации экранов

Если вам нужны более сложные анимации, вы можете использовать ссылки на анимации (Animation links). Эти специальные виды ссылок автоматически создают для каждого виджета анимацию трансформации, которая отображается при загрузке экрана. Лучший способ работы со ссылками на анимации: