Function

Animatable

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)
    }
}