如何在 Jetpack Compose 中为 TextStyle 制作动画?

Flo*_*her 3 android android-jetpack-compose android-jetpack-compose-text

当某个布尔变量为 true 时,我的一个可组合项中的文本会被删除。如何在TextStyle重组时为这种变化设置动画,以便线条淡入而不是突然出现和消失?

@Composable
fun MyComposable(
    completed: Boolean
) {
    val textStyle = TextStyle(textDecoration = if (completed) TextDecoration.LineThrough else null)

    Text(
        text = title,
        color = textColor,
        style = textStyle,
        modifier = Modifier.align(Alignment.CenterVertically)
    )
Run Code Online (Sandbox Code Playgroud)

Gab*_*tti 5

不确定是否存在一种使TextStyle.
这不是一个很好的解决方案,只是一个解决方法:

Box() {
    AnimatedVisibility(
        visible = !completed,
        enter = fadeIn(
            animationSpec = tween(durationMillis = duration)
        ),
        exit = fadeOut(
            animationSpec = tween(durationMillis = duration)
        )) {
        Text(
            text = title,
            style = TextStyle(textDecoration=null)
        )
    }
    AnimatedVisibility(
        visible = completed,
        enter = fadeIn(
            animationSpec = tween(durationMillis = duration)
        ),
        exit = fadeOut(
            animationSpec = tween(durationMillis = duration)
        )) {
        Text(
            text = title,
            style = TextStyle(textDecoration = TextDecoration.LineThrough),
        )
    }
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述