The basic idea behind implementing a slot-machine animation, is running a slide-up/down animation for consecutive digits (3 to 4, 7 to 8 etc.) and upon completion, replace those with the next set of consecutive digits and continue with the animation. Repeat this until you reach the target digit.
If target is 7 starting from 4:
animate(4, 5) -> animate(5, 6) -> animate(6, 7)Setting the current iteration’sfrom value, to the previous iteration’s to value, will give the impression of continuity across multiple animations.
Let’s take a look at an individual animation loop.
[1] The current from value would be the floor of currentSlotValue.
[2] Animating from to to is done using transition() as discussed in the Neomorph Button example. To calculate the incremental increase (delta) we subtract the floor value of currentSlotValue from its actual value.
[3] Next we define the underlying @Composable Text() y-offset value based on this incremental delta.
[4] This is the@Composable Text() for each of the digit infromvalue. It has an initial y-offset of 0.dp.
[5] This is the@Composable Text() for the digit of the correspondingto value (which is from + 1).
Also to keep in mind that, afrom value ending with 9 will have itsto value ending with a 0.
Depending on the preferred direction of scroll, its initial y-offset of is set beyond the height of the current @Composable (in this case +50.dp).
Let’s combine these individual animation loops into a single from to to animation as we’d discussed earlier. This part would be rather simple to understand since we’ve already discussed about transition() in the Neomorphic button example.
[1] We’ve two states, from being state(0) and to being state(1). As we’ve decided to ‘animate’ between two digits, we need to use Floatfor granularity purposes.
Since fromcan be less than to or vice versa, the current implementation would mean, that the animation direction could reverse based on the values passed.
[2] We use a tween() AnimationSpec with a duration of 300ms per animation loop set dynamically over the entire duration of from to to.
But currently the animation reverses?
As mentioned above and also in the example screenshot at the beginning of this article, we see the direction of animation reversing when from > to. How do we avoid this reversing and preserve a set direction of the animation?
All we have to do is, simply consider this case as an overflow over 9 and add 10 to the to value. For, example, if from = 5, to = 4, it would effectively mean from = 5, to = 14.
And inside @Composable SlotText(), set the current to the last digit from the overflowed value.
Hopefully that made sense 😅
And that concludes my short snippet on implementing a Slot machine scroll animation using Jetpack Compose.
My implementation may not be the most optimised or perfect, but hopefully it could help you with few references to Compose implementations.
I’m documenting all my snippets at a single place. Check out Jetpack Compose over a Cup of Hot Chocolate ☕️
