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?
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:
