I saw this animation in the kicker app and tried t...

# compose

[bodo]

I saw this animation in the kicker app and tried to do it in compose. i already have the outerline (white) and the inner hexagon (red) with the rotate animaton. but i really struggle with the animation of the white line. can you give me a few hints how this could be done?

Screen Recording 2022-09-30 at 13.11.47.mov

[Oleksandr Balan]

I would say you have to go with custom drawing of the path on the canvas for example with .drawWithContent() modifier. At the begining with the provided size you have to construct a list with all 6 hexagon points and then draw a path with lines starting from 1st point, to 2nd, then 3d and end in 4th. For animation purposes I would create a progress state with infinity repeated animation from 0f to 1f, which will represent a "shift" of the start and end of the path along their lines. Thus when a progress is set for example to 0.3f the starting point should be calculated on the line between 1st and 2nd point, end end point on the line between 4th and 5th point accordingly. When progress reaches 1f you should increment the starting index in the points array so that you will start with path: 2nd -> 3rd -> 4th -> 5th. Then you may style the path with rounded caps.

[Rebecca Franks]

This talk may help you - https://www.droidcon.com/2022/06/28/graphics-for-android-developers-part-deux/ If you have a path that are you drawing for that whole hexagon, you can use PathMeasure APIs to get a path for a certain length - your length can be a fraction of the total length, this will then return the path you need to draw, you can use that to draw the fraction of the path (as an animated value).

[bodo]

Thx for all your Input. I did a little hack with the pathmeasure api