Comment on page
Animations
Animations are crucial in providing a smooth and engaging experience for the users. Jetpack Compose provides an extensive list of APIs that can be used to implement different animation in an app. Many Jetpack Compose animation APIs can be used as composable functions like other layout and ui elements.
The
AnimatedVisibility
composable animates the appearance and dissapearane of elements. By default, the enter transition is fading in and expanding, and the exit transition is fading out and shrinking. The transition can be customized by specifying EnterTransition
and ExitTransition
. EnterTransition
examples: fadeIn
, slideIn
, slideInHorizontally
, slideInVertically
, scaleIn
, expandIn
, expandHorizontally
, expandVertically
ExitTransition
examples: fadeOut
, slideOut
, slideOutHorizontally
, slideOutVertically
, scaleOut
, expandOut
, shrinkHorizontally
, shrinkVertically
Transitions can be combined using a
+
operator in between EnterTransition
or ExitTransition
objects. Content within
AnimatedVisibility
, direct or indirect children, can use the animateEnterExit
modifier to specify a different animation behavior for each child. The visual effect for each child is a combonation of the animation specified in the AnimatedVisibility
composable and the child's own animation. AnimatedVisibility(
visible = visible,
enter = fadeIn(),
exit = fadeOut()
) {
// Fade in/out the background and the foreground.
Box(Modifier.fillMaxSize().background(Color.DarkGray)) {
// Box is a child of AnimatedVisibility
Box(
Modifier
.align(Alignment.Center)
.animateEnterExit(
// Slide in/out the inner box.
enter = slideInVertically(),
exit = slideOutVertically()
)
.sizeIn(minWidth = 256.dp, minHeight = 64.dp)
.background(Color.Red)
) {
// Content...
}
}
}
If each child wants its own distinct animation, AnimatedVisibility can apply no animations by specifying
EnterTransition.None
and ExitTransition.None
in the AnimatedVisibility composable. The
animate*AsState
functions are the easiest to animate a single value. The function takes in an end value, and the API starts the animation from the current value to the end value. val alpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f)
Box(
Modifier.fillMaxSize()
//alpha is the opacity of the box
.graphicsLayer(alpha = alpha)
.background(Color.Red)
)
// changes the opacity of a red rectangle between 1f to 0.5f
Jetpack Compose provides
animate*AsState
functions for Float
, Color
, DP
, Size
, Offset
, Rect
, Int
, IntOffset
, and IntSize
. Other data types can be supported by providing a TwoWayConverter
to animateValueAsState
that takes a generic type. Most animation APIs allow developers to cusomize the animation by an optional
AnimationSpec
parameter. Dependent on the animation type, the AnimationSpec
will also be different. Last modified 10mo ago