Ticker - Ticker V1

ticker_ticker_v1.kt

@Composable
fun Ticker(
    letter: Char,
    modifier: Modifier = Modifier,
    textColor: Color = Color.White,
    backgroundColor: Color = Color.Black,
    fontSize: TextUnit = 96.sp,
) {
    // 1
    val animatable = remember {
        Animatable(initialValue = 0f)
    }
    // 2
    LaunchedEffect(key1 = letter) {
        // 3
        val currentIndex = animatable.value.toInt()
        // 4
        val index = AlphabetMapper.getIndexOf(letter)
        // 5
        val target = if (index < currentIndex) {
            index + (AlphabetMapper.size * (currentIndex / AlphabetMapper.size + 1))
        } else {
            index
        }
        // 6
        val result = animatable.animateTo(
            targetValue = target.toFloat(),
            animationSpec = tween(
                durationMillis = (target - currentIndex) * TickerCycleMillis,
                easing = FastOutSlowInEasing,
            )
        )
        // 7
        if (result.endReason == AnimationEndReason.Finished) {
            animatable.snapTo(index.toFloat())
        }
    }
    // 8
    val fraction = animatable.value - animatable.value.toInt()
    // 9
    val rotation = -180f * fraction
    // 10
    val currentLetter = AlphabetMapper.getLetterAt(animatable.value.toInt())
    val nextLetter = AlphabetMapper.getLetterAt(animatable.value.toInt() + 1)
    Box(
        modifier = modifier
    ) {
        CenteredText(
            letter = nextLetter,
            textColor = textColor,
            backgroundColor = backgroundColor,
            fontSize = fontSize,
        )
        Column(
        ) {
            Box(
                modifier = Modifier
                    .zIndex(1f)
                    // 11
                    .graphicsLayer {
                        rotationX = rotation
                        cameraDistance = 6f * density
                        transformOrigin = TransformOrigin(.5f, 1f)
                    }

            ) {
                if (fraction <= .5f) {
                    TopHalf {
                        CenteredText(
                            letter = currentLetter,
                            textColor = textColor,
                            backgroundColor = backgroundColor,
                            fontSize = fontSize,
                        )
                    }
                } else {
                    BottomHalf(
                        modifier = Modifier.graphicsLayer {
                            rotationX = 180f
                        }
                    ) {
                        CenteredText(
                            letter = nextLetter,
                            textColor = textColor,
                            backgroundColor = backgroundColor,
                            fontSize = fontSize,
                        )
                    }
                }
            }
            BottomHalf {
                CenteredText(
                    letter = currentLetter,
                    textColor = textColor,
                    backgroundColor = backgroundColor,
                    fontSize = fontSize,
                )
            }
        }
    }
}