Анимация

  1. Анимация нажатия
  2. Анимация перехода
  3. Анимированное изменение положения элемента
  4. Узнать больше

Анимация нажатия

Если у элемента указано хотя бы одно действие при нажатии, то можно настроить для него анимацию в поле 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.

Посмотреть интерактивный пример

Узнать больше

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news

Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru

Репозиторий DivKit