---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/concepts/animation.md
  - https://divkit.tech/docs/ru/concepts/animation.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt

# Анимация

## Анимация нажатия {#action-animation}

Если у элемента указано хотя бы одно действие при нажатии, то можно настроить для него анимацию в поле `action_animation`. Анимация должна иметь тип `animation`.

![](../_images/create-card/action-animation.gif =250x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/animation_1.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}


## Анимация перехода {#transition-animation}

DivKit позволяет выполнять смену верстки с автоматической анимацией. Смена верстки происходит в одном из двух случаев:

- вызов `DivView#setData(DivData, DivDataTag)`;
- переключение состояния.

Для элементов, которые должны анимироваться, задайте `id` и требуемый тип перехода:

- `transition_in` — способ появления элемента, если он отсутствует в старой верстке, но присутствует в новой;
- `transition_change` — способ изменения элемента, если он присутствует и в старой верстке, и в новой. Например, изменение положения или размеров;
- `transition_out` — способ исчезновения элемента, если он присутствует в старой верстке, но в новой его нет.

Анимации перехода имеют тип [appearance-transition](https://divkit.tech/docs/ru/concepts/divs/2/div-appearance-transition.md).

**Перемещение за край изображения**
:   Используйте элемент [slide-transition](https://divkit.tech/docs/ru/concepts/divs/2/div-slide-transition.md).

  ![](../_images/create-card/slide.gif =250x)


  {% cut "Посмотреть интерактивный пример" %}


  <iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/ru/animation_2_ru.json" width="700" height="500" frameborder="1"></iframe>



  {% endcut %}

**Изменение прозрачности**
:   Используйте элемент [fade-transition](https://divkit.tech/docs/ru/concepts/divs/2/div-fade-transition.md).

  ![](../_images/create-card/fade.gif =250x)

  {% cut "Посмотреть интерактивный пример" %}


  <iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/ru/animation_3_ru.json" width="700" height="500" frameborder="1"></iframe>



  {% endcut %}

**Изменение размера**
:   Используйте элемент [scale-transition](https://divkit.tech/docs/ru/concepts/divs/2/div-scale-transition.md).

  ![](../_images/create-card/scale.gif =250x)

  {% cut "Посмотреть интерактивный пример" %}


  <iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/ru/animation_4_ru.json" width="700" height="500" frameborder="1"></iframe>




  {% endcut %}

**Объединение нескольких переходов**
:   Можно задать одному элементу несколько видов переходов, объединив их в набор `set`. Для этого используйте [appearance-set-transition](https://divkit.tech/docs/ru/concepts/divs/2/div-appearance-set-transition.md).

  ![](../_images/create-card/set.gif =250x)

  {% cut "Посмотреть интерактивный пример" %}


  <iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/ru/animation_5_ru.json" width="700" height="500" frameborder="1"></iframe>




  {% endcut %}

## Анимированное изменение положения элемента {#change-transition-animation}

Настройте анимацию изменения положения элемента в поле `transition_change`. Такая анимация имеет тип [change-transition](https://divkit.tech/docs/ru/concepts/divs/2/div-change-transition.md).

![](../_images/create-card/change-bounds.gif =250x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/animation_6.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}

## Аниматоры для изменения переменных {#animators}

Настроить анимированное изменение значения переменной можно в поле `animators`. Такие аниматоры могут взаимодействовать с различными типами переменных - [animator](https://divkit.tech/docs/ru/concepts/divs/2/div-animator.md). 

Запускать и останавливать аниматоры нужно с помощью экшенов [action-animator-start](https://divkit.tech/docs/ru/concepts/divs/2/div-action-animator-start.md) и [action-animator-stop](https://divkit.tech/docs/ru/concepts/divs/2/div-action-animator-stop.md). При использовании экшенов для взаимодействия с аниматором, который лежит в другом блоке можно использовать `scope_id` у [action](https://divkit.tech/docs/ru/concepts/divs/2/div-action.md), где указать `id` дива с аниматором.

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/articles/01/animation_v01.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}

## Анимированные изображения {#animated-images}

DivKit поддерживает отображение анимированных изображений, включая WebP анимации, через компонент `gif`. Анимированные изображения работают на всех платформах и могут использоваться для создания динамического контента.

**WebP анимации**
:   Для отображения анимированных WebP изображений используйте компонент `gif`. WebP формат обеспечивает эффективное сжатие и поддержку прозрачности в анимациях.

  
    ![](https://yastatic.net/s3/home/divkit/doc_samples/ru/webp_animation.webp =250x)
  
    {% cut "Посмотреть интерактивный пример" %}
  
    <iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/ru/webp_animation.json" width="700" height="500" frameborder="1"></iframe>

  {% endcut %}



<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

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



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->