Как сделать текстовый номер анимированным при отображении в джетпаке?

Question

Я хочу показать текст с числами, и я хотел добиться того, чтобы анимировать этот текст при его отображении. Анимация заключается в том, что счетчик должен увеличиваться с нуля до целевого значения. Я пытался использовать animateIntAsState , но это не работает.

Это состояние, в котором я устал:

       val daysCounter by animateIntAsState(
        targetValue = days ,
        animationSpec = tween(
            durationMillis = 5000,
            easing = FastOutSlowInEasing
        )
    )

И текст:

              Text(
                text = "$daysCounter",
                fontSize = 40.sp,
                color = MaterialTheme.colors.onPrimary,
                fontWeight = FontWeight.Bold
            )

Answer 1

ИзanimateIntAsState:

При изменении предоставленного анимация будет запускаться автоматически.

Ваша анимация не работает, потому что targetValueявляется статическим.

Первая перекомпоновка должна быть выполнена с начальным значением, а в следующую перекомпоновку можно передать целевое значение. Например, вы можете использовать LaunchedEffectесли вам нужно запустить анимацию мгновенно (или с некоторой задержкой) при появлении экрана:

      var days by remember { mutableStateOf(0) }
val daysCounter by animateIntAsState(
    targetValue = days,
    animationSpec = tween(
        durationMillis = 5000,
        easing = FastOutSlowInEasing
    )
)
LaunchedEffect(Unit) {
    days = 300
}

Подробнее об анимациях в Compose можно прочитать в документации .