EnterTransition
Kotlin
|Java
@Immutable sealed class EnterTransition
kotlin.Any | |
↳ | androidx.compose.animation.EnterTransition |
EnterTransition defines how an AnimatedVisibility Composable appears on screen as it becomes visible. The 3 categories of EnterTransitions available are:
- fade fadeIn)
- slide: slideIn, slideInHorizontally, slideInVertically
- expand: expandIn, expandHorizontally, expandVertically They can be combined using plus operator, for example:
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.spring import androidx.compose.animation.core.tween import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.slideInHorizontally import androidx.compose.animation.slideOutHorizontally import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember var visible by remember { mutableStateOf(true) } AnimatedVisibility( visible = visible, enter = slideInHorizontally( // Offsets the content by 1/3 of its width to the left, and slide towards right initialOffsetX = { fullWidth -> -fullWidth / 3 }, // Overwrites the default animation with tween for this slide animation. animSpec = tween(durationMillis = 200) ) + fadeIn( // Overwrites the default animation with tween animSpec = tween(durationMillis = 200) ), exit = slideOutHorizontally( // Overwrites the ending position of the slide-out to 200 (pixels) to the right targetOffsetX = { 200 }, animSpec = spring(stiffness = Spring.StiffnessHigh) ) + fadeOut() ) { // Content that needs to appear/disappear goes here: Box(Modifier.fillMaxWidth().height(200.dp)) {} }Note: fadeIn and slideIn do not affect the size of the AnimatedVisibilitycomposable. In contrast, expandIn will grow the clip bounds to reveal the whole content. Thiswill automatically animate other layouts out of the way, very much like animateContentSize.
Summary
Public methods | |
---|---|
operator EnterTransition |
plus(enter: EnterTransition) Combines different enter transitions. |
Public methods
plus
@Stable operator fun plus(enter: EnterTransition): EnterTransition
Combines different enter transitions. The order of the EnterTransitions being combined does not matter, as these EnterTransitions will start simultaneously.
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.expandVertically import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically import androidx.compose.animation.slideInVertically import androidx.compose.animation.slideOutVertically import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.material.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember var visible by remember { mutableStateOf(true) } AnimatedVisibility( visible = visible, enter = slideInVertically( // Start the slide from 40 (pixels) above where the content is supposed to go, to // produce a parallax effect initialOffsetY = { -40 } ) + expandVertically( expandFrom = Alignment.Top ) + fadeIn(initialAlpha = 0.3f), exit = slideOutVertically() + shrinkVertically() + fadeOut() ) { // Content that needs to appear/disappear goes here: Text("Content to appear/disappear", Modifier.fillMaxWidth().height(200.dp)) }
Parameters | |
---|---|
enter: EnterTransition | another EnterTransition to be combined |