CODEWITHSUNDEEP
androidandroid-animationandroid-jetpack-compose
Barrufet
Barrufet

Reputation: 682

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

So for I'm using animateIntAsState() and I want the last 3 digits to be able for the user to watch how it goes up, for example.

In a range of 0..300, I want to go from 0..296.. and then user sees slowly how it increments from 296 to 297, then to 298, then to 299 and finally 300.

From the current predefined "easing", there's no way to do this, how could I make a custom one for this?

Upvotes: 3

Views: 409

Answers (1)

Phil Dukhov
Phil Dukhov

Reputation: 88082

You can use keyframes animation:

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
}

Result:

Upvotes: 4

Related Questions