AnimatedText

Composable Component

A composable that displays an animated text.

Android
@Composable
@RequiresApi(31)
public fun AnimatedText(
    text: String,
    fontRegistry: AnimatedTextFontRegistry,
    progressFraction: () -> Float,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.Center,
)

Parameters

textThe text to be displayed.
fontRegistryThe font registry to be used to animate the text.
progressFractionA provider for the current state of the animation. Provided value should be between 0f and 1f, but might go beyond in some cases such as overshooting spring animations.
modifierModifier to be applied to the composable.
contentAlignmentAlignment within the bounds of the Canvas.

Code Examples

AnimatedTextSample

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

AnimatedTextSampleButtonResponse

@Composable
fun AnimatedTextSampleButtonResponse() {
    val scope = rememberCoroutineScope()
    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 = 30.sp,
        )
    val number = remember { mutableIntStateOf(0) }
    val textAnimatable = remember { Animatable(0f) }
    Row(verticalAlignment = Alignment.CenterVertically) {
        Button(
            modifier = Modifier.padding(horizontal = 16.dp),
            onClick = {
                number.value -= 1
                scope.launch {
                    textAnimatable.animateTo(1f)
                    textAnimatable.animateTo(0f)
                }
            },
            label = {
                Text(modifier = Modifier.semantics { contentDescription = "Decrease" }, text = "-")
            },
        )
        AnimatedText(
            text = "${number.value}",
            fontRegistry = animatedTextFontRegistry,
            progressFraction = { textAnimatable.value },
        )
        Button(
            modifier = Modifier.padding(horizontal = 16.dp),
            onClick = {
                number.value += 1
                scope.launch {
                    textAnimatable.animateTo(1f)
                    textAnimatable.animateTo(0f)
                }
            },
            label = {
                Text(modifier = Modifier.semantics { contentDescription = "Increase" }, text = "+")
            },
        )
    }
}

AnimatedTextSampleSharedFontRegistry

@Composable
fun AnimatedTextSampleSharedFontRegistry() {
    val animatedTextFontRegistry =
        rememberAnimatedTextFontRegistry(
            // Variation axes at the start of the animation, width 50, weight 300
            startFontVariationSettings =
                FontVariation.Settings(FontVariation.width(50f), FontVariation.weight(300)),
            // Variation axes at the end of the animation are the same as the start axes
            endFontVariationSettings =
                FontVariation.Settings(FontVariation.width(50f), FontVariation.weight(300)),
            startFontSize = 15.sp,
            endFontSize = 25.sp,
        )
    val firstAnimatable = remember { Animatable(0f) }
    val secondAnimatable = remember { Animatable(0f) }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        AnimatedText(
            text = "Top Text",
            fontRegistry = animatedTextFontRegistry,
            progressFraction = { firstAnimatable.value },
        )
        AnimatedText(
            text = "Bottom Text",
            fontRegistry = animatedTextFontRegistry,
            progressFraction = { secondAnimatable.value },
        )
    }
    LaunchedEffect(Unit) {
        firstAnimatable.animateTo(1f)
        firstAnimatable.animateTo(0f)
        secondAnimatable.animateTo(1f)
        secondAnimatable.animateTo(0f)
    }
}