Добавление анимации в приложение улучшает пользовательский опыт. Хорошо отрежиссированная анимация может сделать приложение более интуитивно понятным.
На этой странице вы узнаете, как добавить анимацию в виджеты.
Добавление анимации
Существует два способа добавления анимации в виджеты:
- Анимация при загрузке страницы
- Анимация при срабатывании действия
1. Анимация при загрузке страницы
Анимация, заданная при загрузке страницы, начинает выполняться сразу после загрузки страницы. Например, скольжение в форме входа в систему, когда страница становится видимой.
Чтобы добавить анимацию при загрузке страницы:
- Сначала добавьте виджет, который вы хотите анимировать.
- Перейдите на панель свойств и выберите вкладку Анимация (в правой части экрана).
- По умолчанию вкладка «При загрузке страницы» уже выбрана. Нажмите на + Добавить анимацию и найдите или выберите тип анимации.
- Если вы хотите скрыть виджет перед началом анимации, включите опцию Hide Before Animating.
- Если вы хотите добавить несколько анимаций и запустить их вместе на одинаковое время, включите опцию Apply same duration & delay. Для создания ступенчатой анимации отключите эту опцию.
Внутри добавленной анимации установите для кривой анимации желаемый вариант из следующих: «Ускорение», «Ускорение», «Ускорение», «Отскок», «Упругость» и «Линейный». Это определяет, как должна вести себя анимация в течение определенного времени. Вы можете попробовать каждый из них, чтобы понять, какой подходит лучше. - Значение Duration указывает время, в течение которого будет работать анимация. Примечание: Это значение должно быть в миллисекундах (например, 1000 мс = 1 секунда).
- Установите значение Задержка, если вы хотите запустить анимацию через определенное время.
- Смотрите, как настроить анимацию.
- Нажмите на кнопку Предварительный просмотр (вверху), чтобы увидеть анимацию в действии.
2. Анимация при срабатывании действия
Анимация, определенная при срабатывании действия, начинает выполняться, как только срабатывает анимационное действие. Например, выдвижение элемента списка при нажатии кнопки удаления.
Анимация виджета по триггеру действия состоит из следующих шагов:
- Добавить виджет с анимацией
- Запуск анимации
2.1 Добавление виджета с анимацией
Чтобы задать анимацию, которая будет запускаться при нажатии кнопки:
- Выберите виджет (например, Container), перейдите на панель свойств и выберите вкладку Animations (в правой части экрана).
- По умолчанию выбрана вкладка «При загрузке страницы». Измените его на On Action Trigger.
- Нажмите на + Добавить анимацию и найдите или выберите тип анимации.
- По умолчанию включен параметр Apply Initial State. Это сбросит анимацию до ее срабатывания.
- Если вы хотите скрыть виджет перед анимацией, включите Hide Before Animating.
- Если вы хотите добавить несколько типов анимации и запустить их вместе на одинаковое время, включите опцию Apply same duration & delay. Для создания ступенчатой анимации отключите эту опцию.
- Внутри добавленной анимации установите для кривой анимации желаемый вариант из следующих: «Ускорение», «Ускорение», «Ускорение», «Отскок», «Упругий» и «Линейный». Это определяет, как должна вести себя анимация в течение определенного времени. Вы можете попробовать каждый из них, чтобы понять, какой подходит лучше.
- Значение Duration указывает время, в течение которого будет работать анимация. Примечание: Это значение должно быть в миллисекундах (например, 1000 мс = 1 секунда).
- Установите значение Задержка, если вы хотите запустить анимацию через определенное время.
- Смотрите, как настроить анимацию.
- Нажмите на кнопку Предварительный просмотр (вверху), чтобы увидеть анимацию в действии.
2.2 Анимация триггера
Смотрите, как добавить это действие на следующей странице:
Настройка анимации
Этот раздел поможет вам настроить различные типы анимации.
Предварительные условия
Чтобы настроить анимацию, убедитесь, что вы добавили анимацию.
1. Fade
Чтобы настроить анимацию Fade, выполните следующие действия:
- В разделе Fade введите значения для следующих свойств:
- Initial Opacity: Если вы хотите запустить анимацию с определенной видимости, установите начальную непрозрачность с помощью ползунка или введите значение. Например, значение 0,5 запустит анимацию затухания с частичной видимости. Начальная непрозрачность может принимать значение от 0 до 1. Где 0 означает отсутствие видимости, а 1 — полную видимость.
- Окончательная непрозрачность: Если вы хотите, чтобы по окончании анимации была определенная видимость, установите конечную непрозрачность с помощью ползунка или введите значение.
- Например, значение 0,5 приведет к частичной видимости виджета по окончании анимации.
- Окончательная непрозрачность может принимать значение от 0 до 1. Где 0 означает отсутствие видимости, а 1 — полную видимость.
2. Слайд
Существует два типа анимации слайдов, которые можно добавить в виджет:
- Горизонтальный слайд
- Вертикальный слайд
При настройке Горизонтального слайда или Вертикального слайда:
- Если вы зададите только начальное положение (и оставите конечное положение), текущее положение будет считаться значением конечного положения.
- Если направление текста — справа налево, направления анимации будут противоположными.
2.1 Горизонтальный слайд
Чтобы настроить анимацию горизонтального слайда, выполните следующие действия:
- Внутри раздела Слайд > Горизонтальный слайд введите значения для следующих свойств:
- Initial Position: Если вы хотите начать анимацию с определенного положения, установите Начальное положение с помощью ползунка или введите значение. Например, при значении 0 анимация начнется с текущей позиции. Значение -100 запустит анимацию на 100px от левой стороны от текущей позиции. Значение 100 запустит анимацию на 100px от правой стороны текущей позиции.
- Конечная позиция: Если вы хотите закончить анимацию в определенном месте, установите Final Position с помощью ползунка или введите значение. Например, при значении 0 анимация закончится в текущей позиции. Значение -100 завершит анимацию на 100px левее текущей позиции. Значение 100 завершит анимацию на 100px справа от текущей позиции.
Если вы хотите, чтобы виджет появлялся и исчезал с экрана, задайте Начальное положение и Конечное положение большее положительное или отрицательное значение.
2.2 Вертикальный слайд
Чтобы настроить анимацию вертикального слайда, выполните следующие действия:
- В разделе Слайд > Вертикальный слайд введите значения для следующих свойств:
- Initial Position: Если вы хотите начать анимацию с определенного положения, установите Начальное положение с помощью ползунка или введите значение. Например, при значении 0 анимация начнется с текущей позиции. Значение -100 запустит анимацию на 100px от верхней стороны текущей позиции. Значение 100 запустит анимацию на 100px от нижней стороны текущей позиции.
- Конечная позиция: Если вы хотите закончить анимацию в определенном месте, установите Final Position с помощью ползунка или введите значение. Например, при значении 0 анимация закончится в текущей позиции. Значение -100 завершит анимацию на 100px сверху от текущей позиции. Значение 100 завершит анимацию на 100px снизу от текущей позиции.
Если вы хотите, чтобы виджет появлялся и исчезал с экрана, задайте для параметров Initial Position и Final Position большее положительное/отрицательное значение.
3. Масштаб
Чтобы настроить анимацию масштаба:
- В разделе Масштаб введите значения для следующих свойств:
- Initial Scale: Это будет размер виджета перед началом анимации.
- Конечный масштаб: Это будет размер виджета после завершения анимации.
Чтобы создать эффект растущей анимации, значение Final Scale должно быть больше, чем Initial Scale. Чтобы создать эффект уменьшения, оно должно быть меньше, чем начальное значение.
4. Поворот
Чтобы настроить анимацию поворота:
- В разделе Rotate введите значения для следующих свойств:
- Initial Turns: Количество оборотов до начала анимации. В идеале это значение должно быть равно 0.
- Final Turns: Количество поворотов виджета в анимации.
- 1 оборот составляет 360 градусов. Если ввести значение 0,5, виджет повернется на 90 градусов.
- По умолчанию виджет вращается по часовой стрелке.Чтобы повернуть виджет против часовой стрелки, введите отрицательное значение.
5. Встряска
Чтобы настроить анимацию встряхивания:
- В разделе «Встряхивание» введите значения для следующих свойств:
- Частота: Примерное количество повторений встряхиваний в секунду.
- Горизонтальное смещение: Здесь вы можете указать расстояние, на которое нужно перемещаться при встряхивании в горизонтальном направлении. Чтобы создать интенсивный эффект тряски, введите большее значение. Отрицательное значение начнет эффект тряски с противоположного направления.
- Вертикальное смещение: Здесь можно задать расстояние, на которое будет перемещаться тряска в вертикальном направлении. Для создания интенсивного эффекта тряски введите большее значение. Отрицательное значение начнет эффект тряски с противоположного направления.
- Угол поворота: Здесь указывается угол, на который виджет должен встряхиваться по обеим осям.
6. Размытие
Чтобы настроить анимацию размытия:
- В разделе Размытие введите значения для следующих свойств:
- Initial Radius (Начальный радиус): Это будет радиус размытия перед началом анимации.
- Конечный радиус: Это будет радиус размытия после окончания анимации.
Для создания эффекта расфокусировки значение Final Radius должно быть больше, чем Initial Radius. Для создания эффекта фокуса значение Final Radius должно быть меньше, чем Initial Radius.
7. Насыщение
Для настройки анимации насыщения:
- В разделе Насыщение введите значения для следующих свойств:
- Initial Strength (Начальная сила): Это будет сила насыщения перед началом анимации.
- Конечная сила: Это будет сила насыщения после окончания анимации.
- Значения начальной и конечной насыщенности задаются в процентах.
- 0% означает полную десатурацию, 100% — нормальную насыщенность, а любое значение свыше 100% означает перенасыщенность.
8. Наклон
Чтобы настроить анимацию наклона:
- В разделе Наклон введите значения для следующих свойств:
- Горизонтальный наклон:
- Начальный наклон: Наклон перед началом анимации в горизонтальном направлении.
- Конечный наклон: Наклон после окончания анимации в горизонтальном направлении.
- Вертикальный наклон:
- Начальный наклон: Наклон перед началом анимации в вертикальном направлении.
- Конечный наклон: Наклон после окончания анимации в вертикальном направлении.
- Горизонтальный наклон:
- Большее значение добавляет виджету больший наклон.
- Отрицательное значение запускает эффект трансформации в противоположном направлении.
Поэтапная анимация
Поэтапная анимация — это несколько анимаций, выполняемых последовательно (одна за другой). Добавление ступенчатой анимации может помочь вам создать потрясающий визуальный эффект.
Вот пример ступенчатой анимации:
Для создания ступенчатой анимации:
- Убедитесь, что вы отключили опцию Применять одинаковую продолжительность и задержку.
- Добавьте несколько анимаций, нажав на + Добавить анимацию.
- Настройте задержку вновь добавленной анимации. Она должна быть равна сумме длительностей всех ранее добавленных анимаций. Например, если длительность первой и второй анимации равна 1000 мс (т.е. 1 секунда), то задержка третьей анимации должна быть 2000 (т.е. 2 секунды). Это заставит третью анимацию ждать 2 секунды, пока две предыдущие анимации (каждая длительностью 1 секунда) завершатся.
