This [Animatable] function creates a float value holder that automatically animates its value when the value is changed via [animateTo].
AnimatableFadeIn
fun AnimatableFadeIn() {
fun Modifier.fadeIn(): Modifier = composed {
// Creates an `Animatable` and remembers it.
val alphaAnimation = remember { Animatable(0f) }
// Launches a coroutine for the animation when entering the composition.
// Uses `alphaAnimation` as the subject so the job in `LaunchedEffect` will run only when
// `alphaAnimation` is created, which happens one time when the modifier enters
// composition.
LaunchedEffect(alphaAnimation) {
// Animates to 1f from 0f for the fade-in, and uses a 500ms tween animation.
alphaAnimation.animateTo(
targetValue = 1f,
// Default animationSpec uses [spring] animation, here we overwrite the default.
animationSpec = tween(500),
)
}
this.graphicsLayer(alpha = alphaAnimation.value)
}
}