AnimatedText

Kotlin

@Composable
fun AnimatedTextSample() {
    val scope = rememberCoroutineScope()
    val animatable = remember { Animatable(0f) }
    val animate = {
        scope.launch {
            // Animate from 0 to 1 and then back to 0.
            animatable.animateTo(1f)
            animatable.animateTo(0f)
        }
    }
    val animatedTextFontRegistry =
        rememberAnimatedTextFontRegistry(
            // Variation axes at the start of the animation, width 10, weight 200
            startFontVariationSettings =
                FontVariation.Settings(FontVariation.width(10f), FontVariation.weight(200)),
            // Variation axes at the end of the animation, width 100, weight 500
            endFontVariationSettings =
                FontVariation.Settings(FontVariation.width(100f), FontVariation.weight(500)),
            startFontSize = 30.sp,
            endFontSize = 40.sp,
        )
    AnimatedText(
        text = "Hello!",
        fontRegistry = animatedTextFontRegistry,
        // Content alignment anchors the animation at the vertical center, expanding horizontally
        contentAlignment = Alignment.CenterStart,
        progressFraction = { animatable.value },
        modifier = Modifier.clickable(onClick = { animate() }),
    )
    LaunchedEffect(Unit) { animate() }
}