Hi everyone 
Today I want to share with you an animated counter.
The way it works is very simple,
we have two overlapping labels one that will show the next value and one that shows the current one.
The current one will slide upward, and the next one will come up from below, using the Animation component
nothing simpler!
You can reproduce this effect in many other ways, but I chose this method because it’s done entirely with blocks, making it easier to understand for those who don’t know other programming languages.
Layout
The layout is very simple a VerticalArrangement named VA_Main containing two HorizontalArrangements HA_AnimatedCounter_In and HA_AnimatedCounter_Out, which will hold our labels, That’s it!
The height of the two HAs must be the same for both and must be a fixed value.
The labels aren’t pre-added because I preferred to generate them dynamically, but you can use static components if you like
Blocks
initializeCounter
Parameters:
maxDigitsthe maximum number of digits the counter will havefontSizethe font size of the counter
Here we set a negative top margin for HA_AnimatedCounter_In (the bottom HA) so that it overlaps with HA_AnimatedCounter_Out.
Then, by looping from 1 to maxDigits, we dynamically create the labels.
Two identical labels will be created in the two HorizontalArrangements (which, remember, are overlapped).
To differentiate them, I added a join with 100000000000000000 to one set of label IDs so that they can both be referenced using a single index.
incrementCounter
Parameters:
incrementthe amount by which the counter increases each stepanimationDurationsimply the duration of the scroll animation
This is the beating heart of the counter.
I must admit I still have some doubts about whether it’s fully optimized, I believe it can definitely be improved, but it works
We store the global variable valueCounter in previousNumber, and in nextNumber we save valueCounter + increment.
We calculate the difference in digit length between the two numbers.
for example
if previousNumber is 10 and nextNumber is 1000, the difference will be 2, then we’ll make a loop to join previousNumber + " " as many times as the difference, so that it has the same length as nextNumber.
Next, we loop through the entire length of nextNumber.
For each labels, we set its text to the corresponding text segment, using segment text.
Finally, we compare the segments of previousNumber and nextNumber, if they don’t match, we perform an animation, moving the label in HA_AnimatedCounter_Out upward and the label in HA_AnimatedCounter_In from the bottom up to the center.
AIA
In this project, I added some fields to see the result of this effect.
If you’re not interested in them, to make the counter work, it would only need the layout
initializeCounter, incrementCounter, Animation_Utilities, Decoration and Dynamic_Label.
AnimatedCounterWE.aia (8.5 KB)
