CounterAnimationRow

CounterAnimationRow.kt

@Composable
fun CounterAnimationRow(
    count: Int,
    modifier: Modifier = Modifier,
    charComposable: @Composable RowScope.(Char) -> Unit,
) {
    var oldCount by remember { mutableIntStateOf(count) }
    val increasingValueContentTransform = remember {
        slideInVertically { -it } + fadeIn() togetherWith slideOutVertically { it } + fadeOut()
    }
    val decreasingValueContentTransform = remember {
        slideInVertically { it } + fadeIn() togetherWith slideOutVertically { -it } + fadeOut()
    }

    SideEffect {
        oldCount = count
    }

    Row(modifier) {
        count.toString().forEach { digit ->
            AnimatedContent(
                targetState = digit,
                transitionSpec = {
                    if (oldCount < count) {
                        increasingValueContentTransform
                    } else {
                        decreasingValueContentTransform
                    }.using(
                        SizeTransform(clip = false)
                    )
                },
            ) { target ->
                charComposable(target)
            }
        }
    }
}