[Solved - solution provided in comments] I'm work...

# compose

[Tom Truyen]

[Solved - solution provided in comments]

I'm working on an animation which should do the following:
• Change color of dots
• Change size of dots
• Draw the "changes" between matrices dot per dot
◦ Starting from the bottom-left, then going horizontal until the row is completed and then starting again on the row above, at the left side
So I have a Composable which has as input "percentage" which is the percentage of dots that should be set as active (yellow and larger). Now I want to animate them nicely 1 by 1 like in the attached Gif. This must be done via Canvas since there can be 1000+ dots

Now I have attempted it already but all it does is draw the dots in the correct direction, but it doesn't yet transition the scale or the size since it just updates the matrix by setting a dot to active which means it will just draw new dots instead of animating the transition

Does anyone have solid experience with animations in a Canvas in Compose who has any idea on how to make something like this?

[CODE ATTEMPT IN THREAD]

[Tom Truyen]

Technically each dot animation should take 200ms and they should all run sequentually like in the GIF

[Chris Athanas]

I do something like this in my KMP Compose App “Fred’s Roadtrip Storyteller”, I made a video about it too:

Look for `fun WOPRDotScanner(componentWidth: Dp, isReverse: Boolean = false)`:

Code: https://github.com/realityexpander/FredsRoadtripStoryteller/blob/118d8323a4da49dc9[…]in/kotlin/presentation/uiComponents/PurchaseProVersionButton.kt

Video:

https://youtu.be/aov6J8Bd3hs▾

[Tom Truyen]

Screen_recording_20240430_221951 (1).gif

[Tom Truyen]

Ended improving it by a lot, time complexity and performance wise. I have deleted the old solution, this is the new one

Final Result.kt