如何在 Jetpack Compose 中实现字符串动画？

Question

我可以翻译该内容。以下是您需要翻译的内容：

我有一个字符串“(+91)”。如何使其在某些操作下逐渐淡入，而在其他操作下逐渐淡出。我在我的Textfield中使用“(+91)”作为前缀，并借助visualTransformation实现。

这是我用于Textfield的代码：

    TextField(
        value = query3.value,
        onValueChange = { newValue ->
            query3.value = newValue
            mobErrorVisible.value = false
        },

   visualTransformation = if (showCode){
                    PrefixTransformation("(+91)")} //Animate (+91)
            else
                    PrefixTransformation(""), 
        
            label = {
            Text(
                "Mobile Number",
                color = colorResource(id = R.color.bright_green),
                fontFamily = FontFamily(Font(R.font.poppins_regular)),
                fontSize = with(LocalDensity.current) { dimensionResource(id = R.dimen._12ssp).toSp() })
                
        },
        interactionSource = interactionSource,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        textStyle = TextStyle(
            textAlign = TextAlign.Start,
            color = colorResource(id = R.color.bright_green),
            fontFamily = FontFamily(Font(R.font.poppins_regular)),
            fontSize = with(LocalDensity.current) { dimensionResource(id = R.dimen._16ssp).toSp() }
        ),
        modifier = Modifier
            .drawBehind {
                val strokeWidth = indicatorWidth.value * density
                val y = size.height - strokeWidth / 2
                drawLine(
                    indicatorColor,
                    Offset(TextFieldPadding.toPx(), y),
                    Offset(size.width - TextFieldPadding.toPx(), y),
                    strokeWidth
                )
            }
            .focusRequester(focusRequester)
            .onFocusChanged { showCode = (it.isFocused || query3.value != "")}
            .constrainAs(phone) {
                top.linkTo(glPhone)
                bottom.linkTo(glPhoneBottom)
                start.linkTo(glLeft)
                end.linkTo(glRight)
                width = Dimension.fillToConstraints
                height = Dimension.fillToConstraints
            },
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = Color.Transparent,
            focusedIndicatorColor = Transparent,
            unfocusedIndicatorColor = Transparent,
            disabledIndicatorColor = Transparent
        )
    )

这是我的 PrefixTransformation 类:

 class PrefixTransformation(val prefix: String) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        return PrefixFilter(text, prefix)
    }
}

这是我的PrefixFilter()函数：

fun PrefixFilter(number: AnnotatedString, prefix: String): TransformedText {

    var out = prefix + " " + number.text
    val prefixOffset = prefix.length

    val numberOffsetTranslator = object : OffsetMapping {
        override fun originalToTransformed(offset: Int): Int {
            return offset + prefixOffset
        }

        override fun transformedToOriginal(offset: Int): Int {
            if (offset <= prefixOffset-1) return prefixOffset
            return offset - prefixOffset
        }
    }

    return TransformedText(AnnotatedString(out), numberOffsetTranslator)
}

我们可以这样将颜色动画化：

val color = remember { Animatable(Color.Gray) }
LaunchedEffect(ok) {
    color.animateTo(if (ok) Color.Green else Color.Red)
}
Box(Modifier.fillMaxSize().background(color.value))

但是我们如何对字符串进行动画处理？

- Sparsh Dutta

---

为呈现字符串的Text()添加动画效果。 - CommonsWare

我不需要对整个文本字段进行动画处理，只需要对前缀进行动画处理，这可以通过使用visualTransformation来实现。 - Sparsh Dutta

请查看更新后的问题。 - Sparsh Dutta

是的，我也添加了相应的代码。 - Sparsh Dutta

我们可以将Animatable的值作为参数传递给visualTransformaton，不是吗？ - Sparsh Dutta

Answer 1

一个明智的解决方案是使用一个单独的可组合项来表示国家代码。这样你就可以在类似于 crossfade 或者只是 AnimatedVisibility（自Compose 1.0.0-beta07起实验功能）的东西中包装该可组合项。

- Richard Onslow Roper

Answer 2

你需要的是animatedVisibility组合，以下是一个例子，其中文本的可见性由按钮控制。

Box(
    modifier = Modifier
        .fillMaxSize()
) {
    var visible by remember { mutableStateOf(false) }

    Button(
        modifier = Modifier.align(Alignment.TopCenter),
        onClick = {
            visible = !visible
        }
    ) {
        Text("Toggle Visibility")
    }

    val animationDuration = 2000

    AnimatedVisibility(
        modifier = Modifier.align(Alignment.BottomCenter),
        visible = visible,
        enter = fadeIn(animationSpec = tween(durationMillis = animationDuration)),
        exit = fadeOut(animationSpec = tween(durationMillis = animationDuration))
    ) {
        Text("ABC")
    }
}

- Rafsanjani

---

我不需要对整个文本进行动画处理，只需要对前缀进行处理，这可以通过 visualTransformation 来实现。 - Sparsh Dutta