Skip to content

Instantly share code, notes, and snippets.

@titoaesj
Last active December 2, 2021 12:34
Show Gist options
  • Save titoaesj/b423af91a43de8d48d58b974e80903e9 to your computer and use it in GitHub Desktop.
Save titoaesj/b423af91a43de8d48d58b974e80903e9 to your computer and use it in GitHub Desktop.
Compose component animate text crescent Currency $1.0..N - [Android]
@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun AnimatedCurrencyValue(
targetValue: Double,
delayOfDigits: Long = 100L,
locale: Locale = Locale.US
) {
// create variable for current time
var currentValue by remember {
mutableStateOf(0.0)
}
LaunchedEffect(key1 = currentValue) {
if (currentValue < targetValue) {
delay(delayOfDigits)
currentValue += (targetValue / 10)
}
}
AnimatedContent(targetState = currentValue,
transitionSpec = {
if (targetState > initialState) {
slideInVertically({ height -> height }) + fadeIn() with
slideOutVertically({ height -> -height }) + fadeOut()
} else {
slideInVertically({ height -> -height }) + fadeIn() with
slideOutVertically({ height -> height }) + fadeOut()
}.using(SizeTransform(clip = false))
}
) { targetCount ->
val numberFormat = NumberFormat.getCurrencyInstance(locale)
Text(
numberFormat.format(targetCount.round(2)),
style = MaterialTheme.typography.h4,
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth()
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment