Анимации виджета
Анимация виджета применяется к виджету целиком. Чтобы её добавить, выделите виджет и откройте вкладку анимаций в панели свойств.
Эффекты и их свойства
У большинства эффектов есть общие свойства: Duration — сколько анимация идёт, и Delay — сколько ждёт до начала.
Остальные свойства зависят от эффекта; обычно у них есть начальное и конечное значение.
| Эффект | Что делает | Пример | Свои свойства |
|---|---|---|---|
| Fade | Виджет плавно проявляется или исчезает. Так вводят элементы на экран и переключают внимание между блоками. | Opacity — начальная или конечная видимость: 0 — полностью прозрачный, 1 — полностью видимый | |
| Slide | Виджет выезжает со стороны. Так показывают меню, страницы и уведомления. Работает и по вертикали, и по горизонтали. | Position — 0 означает текущее положение, -100 — на 100 px влево (по горизонтали) или вниз (по вертикали), 100 — на 100 px вправо или вверх. Чтобы виджет уезжал за пределы экрана, задайте значение больше ширины устройства. | |
| Scale | Виджет меняет размер. Так привлекают внимание к кнопке при наведении или раскрывают диалог из центра. | Scale — начальный или конечный множитель по горизонтали (X) и вертикали (Y); 1 — текущий размер | |
| Rotate | Виджет поворачивается по часовой стрелке или против. Отсюда крутящиеся индикаторы загрузки. | Turns — число полных оборотов | |
| Shake | Виджет трясётся. Так отмечают ошибку — например, неверно заполненное поле формы. | Frequency — число колебаний в секунду Offset — размах; больше значение — сильнее тряска, отрицательное меняет направление Rotation Angle — угол наклона при тряске | |
| Blur | Виджет расфокусируется или, наоборот, наводится на резкость. | Radius (X или Y) — сила размытия. Расфокусировка — когда Final Radius больше Initial Radius, наведение на резкость — наоборот. | |
| Saturate | Меняет насыщенность цветов: подсвечивает главное и приглушает фон. | Strength — 0 полностью обесцвечивает, 100 соответствует обычной насыщенности, больше 100 усиливает её | |
| Tilt | Наклоняет виджет в перспективе. Мелкий отклик на касание кнопки или карточки. | Tilt — угол наклона | |
| Flip | Переворачивает виджет вокруг оси, как карточку. | Flip — угол поворота | |
| Shimmer | Пускает по виджету световой блик — так показывают, что содержимое ещё грузится. Учтите: в режиме Test эта анимация не проигрывается. | Color — цвет блика; обычно берут оттенок чуть светлее самого содержимого. Angle — направление блика: 0 градусов — горизонтально, 90 — вертикально | |
| Tint | Накладывает на виджет цветной слой. | Color — цвет слоя Strength — насколько он плотный |
Кривые движения
Кривая задаёт, как значение меняется во времени, — то есть характер движения: равномерный, с разгоном, с отскоком.
Доступные кривые:
| Кривая | Что делает |
|---|---|
| Ease In | Начинает медленно и разгоняется к концу. |
| Ease In Out | Медленно стартует, ускоряется в середине, плавно останавливается. Самый естественный вариант — без рывков на старте и финише. |
| Ease Out | Начинает быстро и мягко тормозит к концу. |
| Bounce | В конце добавляет отскок: объект проскакивает конечную точку и возвращается, как отскочивший мяч. |
| Elastic | Проскакивает цель и колеблется вокруг неё, прежде чем остановиться, — пружинящий эффект. |
| Linear | Идёт с постоянной скоростью, без разгона и торможения. |
Анимация при загрузке страницы
Часто анимацию нужно запускать в момент, когда страница или виджет появляется на экране.
Типичный случай — магазин: запрос к бэкенду тянет список популярных товаров, и между открытием страницы и появлением данных есть пауза. Анимация показывает, что содержимое загружается.
Собирается это так: на виджет-заглушку вешается анимация Shimmer, а сам виджет показывается по условию — пока идёт запрос.
Анимация по действию
Анимацию можно запускать и как обычное действие — например, оживить кнопку «нравится» при нажатии.
Дайте виджету, который анимируется, осмысленное имя — иначе искать его в списке действий будет неудобно.
Несколько анимаций сразу
Одному виджету можно назначить несколько анимаций. По умолчанию они проигрываются друг за другом, образуя каскад. Но можно запустить их и одновременно.
Одновременно
Чтобы анимации шли параллельно — например, виджет одновременно выезжал и увеличивался, — включите Apply same duration & delay при добавлении.
Каскадом
Каскад — это несколько анимаций подряд.
Выключите Apply same duration & delay и добавляйте анимации: задержка каждой следующей подставится автоматически, с учётом длительности всех предыдущих.
Если задержку задаёте вручную, отсчитывайте её от суммарной длительности предыдущих анимаций. Две анимации по 1000 мс — значит, третьей нужна задержка 2000 мс, иначе она начнётся раньше времени.
Пример каскадной анимации:
Значения анимации из переменных
Свойства анимации можно вычислять. Вот список, элементы которого выезжают слева направо один за другим:
Каскад здесь получается за счёт того, что задержка каждого элемента зависит от его номера в списке.
Выделите элемент списка и добавьте ему анимацию Slide.
В свойстве Delay откройте меню переменных и добавьте встроенную функцию, вычисляющую задержку по индексу. Здесь это [index] * 100, где index — позиция элемента, а 100 — шаг в миллисекундах: первый элемент выедет через 100 мс, второй через 200 и так далее.