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


text	The text to be displayed.
fontRegistry	The font registry to be used to animate the text.
progressFraction	A 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.
modifier	Modifier to be applied to the composable.
contentAlignment	Alignment 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)
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled