https://kotlinlang.org logo
#compose
Title
# compose
b

bodo

10/01/2022, 11:57 AM
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?
o

Oleksandr Balan

10/01/2022, 12:31 PM
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.
r

Rebecca Franks

10/01/2022, 1:00 PM
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).
b

bodo

10/02/2022, 11:05 AM
Thx for all your Input. I did a little hack with the pathmeasure api
2 Views