如何在 Jetpack Compose 中将文本从一种排版动画化到另一种排版

Question

如何在 Jetpack Compose 中更改带有动画的文本的排版？

Answer 1

试试这个代码。我认为它有效

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

你应该复制这个函数。因为它是一个内部函数，你不能在你的代码中使用它

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