Home > Net >  How to animate text from a typography to another in jetpack compose
How to animate text from a typography to another in jetpack compose

Time:04-12

How can I change the typography of a text with animation in jetpack compose?

CodePudding user response:

try this code. i think it works

 val rem = remember {mutableStateOf(true)}
 Button(onClick = {rem.value = !rem.value})
{(text = "animate text!")}
val animRem = animateFloatAsState(targetValue = if (rem.value) 1f else .1f)
                    val decoratedLabel: @Composable (() -> Unit) =
                        @Composable {
                            val labelAnimatedStyle = lerp(
                                MaterialTheme.typography.subtitle1,
                                MaterialTheme.typography.caption,
                                animRem.value
                            )
                            Decoration2(
                                contentColor = TextFieldDefaults.textFieldColors()
                                    .labelColor(
                                        true,
                                        // if label is used as a placeholder (aka not as a small header
                                        // at the top), we don't use an error color
                                        rem.value,
                                        remember { MutableInteractionSource() }
                                    ).value,
                                typography = labelAnimatedStyle,
                                content = { Text(text = "label") }
                            )
                        }


                    decoratedLabel()

you should duplicate this function. because it is an internal function and you can't use it in your code

@Composable fun Decoration(
contentColor: Color,
typography: TextStyle? = null,
contentAlpha: Float? = null,
content: @Composable () -> Unit) {
val colorAndEmphasis: @Composable () -> Unit = @Composable {
    CompositionLocalProvider(LocalContentColor provides contentColor) {
        if (contentAlpha != null) {
            CompositionLocalProvider(
                LocalContentAlpha provides contentAlpha,
                content = content
            )
        } else {
            CompositionLocalProvider(
                LocalContentAlpha provides contentColor.alpha,
                content = content
            )
        }
    }
}
if (typography != null) ProvideTextStyle(typography, colorAndEmphasis) else colorAndEmphasis()}
  • Related