Анимация
Анимация нажатия
Если у элемента указано хотя бы одно действие при нажатии, то можно настроить для него анимацию в поле action_animation. Анимация должна иметь тип animation.
Посмотреть интерактивный пример
Анимация перехода
DivKit позволяет выполнять смену верстки с автоматической анимацией. Смена верстки происходит в одном из двух случаев:
- вызов
DivView#setData(DivData, DivDataTag); - переключение состояния.
Для элементов, которые должны анимироваться, задайте id и требуемый тип перехода:
transition_in— способ появления элемента, если он отсутствует в старой верстке, но присутствует в новой;transition_change— способ изменения элемента, если он присутствует и в старой верстке, и в новой. Например, изменение положения или размеров;transition_out— способ исчезновения элемента, если он присутствует в старой верстке, но в новой его нет.
Анимации перехода имеют тип appearance-transition.
- Перемещение за край изображения
-
Используйте элемент slide-transition.
Посмотреть интерактивный пример
- Изменение прозрачности
-
Используйте элемент fade-transition.
Посмотреть интерактивный пример
- Изменение размера
-
Используйте элемент scale-transition.
Посмотреть интерактивный пример
- Объединение нескольких переходов
-
Можно задать одному элементу несколько видов переходов, объединив их в набор
set. Для этого используйте appearance-set-transition.
Посмотреть интерактивный пример
Анимированное изменение положения элемента
Настройте анимацию изменения положения элемента в поле transition_change. Такая анимация имеет тип change-transition.
Посмотреть интерактивный пример
Аниматоры для изменения переменных
Настроить анимированное изменение значения переменной можно в поле animators. Такие аниматоры могут взаимодействовать с различными типами переменных - animator.
Запускать и останавливать аниматоры нужно с помощью экшенов action-animator-start и action-animator-stop. При использовании экшенов для взаимодействия с аниматором, который лежит в другом блоке можно использовать scope_id у action, где указать id дива с аниматором.
Посмотреть интерактивный пример
Узнать больше
Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.