Jetpack 通过 animateFloatAsState 编写眨眼动画，卡在不可见状态

Question

我创建了这个可组合项，以便当我更新文本时，文本视图会闪烁。 我希望它先隐藏，然后更新显示文本，最后显示。

在某些情况下，“更新”值可能与旧值相同，因此我添加时间戳以强制从数据源进行更新。在我的例子中，时间戳的精度是秒。

暂时可以正常使用，但有时会陷入隐形状态。

这是由于动画播放时更新造成的吗？我该如何解决这个问题？

@Composable
fun BlinkTextView(modifier:Modifier = Modifier, text: String, timestamp: Instant?)
{
    var displayValue by remember {mutableStateOf(text)}
    var lastUpdate by remember { mutableStateOf(timestamp)}

    val alpha by animateFloatAsState(targetValue = if(displayValue != text || timestamp != lastUpdate) 0f else 1f, label = "BlinkTextView"){
        displayValue = text
        lastUpdate = timestamp
    }

    Text(modifier = modifier.alpha(alpha), text = text)
}

Answer 1

尝试使用 AnimatedVisibility 和 LaunchedEffect

这是一个例子：

const val BlinkTime = 50

@Composable
fun BlinkTextView(
    text: String,
    modifier: Modifier = Modifier
) {
    var visible by remember {
        mutableStateOf(true)
    }
    
    LaunchedEffect(key1 = text) {
        visible = false
        delay(BlinkTime.milliseconds)
        visible = true
    }

    AnimatedVisibility(
        modifier = modifier,
        visible = visible,
        enter = fadeIn(animationSpec = TweenSpec(durationMillis = 0)),
        exit = fadeOut(animationSpec = TweenSpec(durationMillis = 0))
    ) {
        Text(modifier = Modifier, text = text)
    }

}

用途：

@Composable
fun BlinkTextViewUsage() {
    var myText by remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(20.dp),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TextField(value = myText, onValueChange = { myText = it })

        Spacer(modifier = Modifier.height(20.dp))

        BlinkTextView(
            modifier = Modifier.fillMaxWidth(),
            text = myText
        )
    }
}