Animate*AsState 在最后 3 位或最后一部分变慢

Question

所以我正在使用 animateIntAsState()，我希望最后 3 位数字能够让用户看到它是如何上升的，例如。

在 0..300 的范围内，我想 从 0..296.. 开始，然后是用户 慢慢地看到它是如何从 296 增加到 297，然后增加到 298，然后增加到 299，最后增加到 300。

从当前预定义的“缓动”来看，没有办法做到这一点，我怎么能为此定制一个？

Answer 1

可以使用keyframes动画：

var targetValue by remember { mutableStateOf(0) }
val value by animateIntAsState(
    targetValue = targetValue,
    animationSpec = keyframes {
        durationMillis = 3000 // 3 sec
        0 at 0 with LinearOutSlowInEasing // for 0-1 sec
        296 at 1000 with LinearEasing // for 1-3 sec
    }
)
Text(value.toString())
LaunchedEffect(Unit) {
    // start animation in 1 sec after launch
    delay(1000)
    targetValue = 300
}

结果：

Animate*AsState 在最后 3 位或最后一部分变慢

Animate*AsState slow out in the last 3 digits or last part

android

android-animation

android-jetpack-compose