Animation
Tap animation
If an element has at least one tap action set, you can set up an animation for it in the action_animation field. The animation must be set to the animation type.
View an interactive example
Transition animation
DivKit lets you set up a layout change with an automatic animation. The layout change occurs in one of two cases:
DivView#setData(DivData, DivDataTag)call.- State switch.
For the elements that should be animated, set the id and the required transition type:
transition_in: Appearance of an element that isn't present in the old layout but is present in the new one.transition_change: Change of an element that is present in both old and new layouts. For example, this can be used to change the position or dimensions of an element.transition_out: Disappearance of an element that is present in the old layout but isn't present in the new one.
Transition animations use the appearance-transition type.
- Moving beyond the edge of an image
-
Use the slide-transition element.
View an interactive example
- Changing transparency
-
Use the fade-transition element.
View an interactive example
- Changing size
-
Use the scale-transition element.
View an interactive example
- Combining multiple transitions
-
You can assign different kinds of transitions to one element by combining them into a
set. To do this, use appearance-set-transition.
View an interactive example
Animated change of an element position
Set up an animation that changes the position of an element in the transition_change field. This animation will have the change-transition type.
View an interactive example
Animators for changing variables
You can configure animated changes to a variable value in the animators field. These animators can interact with various types of variables - animator.
You should start and stop animators using actions action-animator-start and action-animator-stop. When using actions to interact with an animator that is located in another block, you can use scope_id in the action, where you specify the id of the div with the animator.
View an interactive example
Learn more
Follow DivKit news in the Telegram channel: http://t.me/divkit_news
You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru