如何在Jetpack Compose中设置字符串动画？

Question

我有一个字符串"(+91)“。如何设置动画，以便在某些动作中，"(+91)“逐渐淡入，而在其他动作中，"(+91)”逐渐淡出。在visualTransformation的帮助下，我在我的文本字段中使用"(+91)“作为前缀。

这是我在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))

但是，我们如何使字符串具有动画效果呢？

Answer 1

您需要的是可组合的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")
    }
}

Answer 2

一个明智的解决方案是对国家代码使用单独的Composable。这样你就可以用crossfade或者AnimatedVisibility ( compose 1.0.0-Beta07的试验性版本)包装可组合体。