Переходы
Эффект Перехода (Transitions) создает плавную анимацию между различными состояниями элемента.
Обычно переходы используются для состояния наведения (Hover) на элементы, чтобы смена состояния не происходила резко. Например, если у вас добавлен эффект тени у элемента при наведении на него, то по умолчанию вы получите резкое переключение эффекта при наведении. Чтобы переключение происходило плавно, нужно добавить эффект перехода. Для создания уникального перехода можно настроить продолжительность и тип смягчения эффекта.
- Выберите элемент, для которого хотите добавить переход (у него должны быть настроены стили для разных состояний)
- Найдите на вкладке Стилей правой панели раздел Эффекты (Effects) и нажмите кнопку “+” справа от параметра Переходы (Transitions):
По умолчанию добавится переход, который применяется ко всем свойствам элемента (All Properties). Вы можете установить переход для любого свойства, кликнув по его названию и выбрав свойство из выпадающего списка.
Если вы хотите настроить переход для фонового цвета, добавьте его с помощью свойства Цвет фона (Background color).
Для свойства Фон (Fill) переходы работать не будут.
Для настройки перехода кликните по кнопке слева от его названия.
В окне настроек имеются следующие параметры:
Тип перехода (Transition) — свойство (стиль), на которое влияет переход. Здесь можно выбрать все свойства (All Properties) или одно из свойств элемента. Выбирайте то свойство, изменение которого вы установили для разных состояний элемента (например, для тени это будет Box Shadow).
Задержка (Delay) — задает время до начала перехода (паузу перед эффектом) в миллисекундах (мс). По умолчанию значение задержки 0 мс. Можно выбрать значение от 0 до 1000 мс из выпадающего списка.
Длительность (Duration) — задает продолжительность эффекта перехода в миллисекундах (мс). Можно изменить продолжительность, установленную по умолчанию на 300 мс, с помощью значений из выпадающего списка или введя значение продолжительности в поле ввода.
Смягчение (Easing) — дает возможность выбрать эффект смягчения для создания более реалистичных эффектов перехода.
Типы смягчения:
- Базовое смягчение (Base Easing) - начинается медленно, к середине ускоряется и замедляется к концу.
- Смягчение в начале (Ease In) - начинается медленно и ускоряется к концу.
- Смягчение в конце (Ease Out) - начинается быстро и замедляется в конце.
Для удобства по каждому виду смягчения перехода предусмотрены готовые варианты свойства в кривых Безье.