Hello! I recently experimenting a bit with Compose...

# compose

[Piotr Prus]

Hello! I recently experimenting a bit with Compose Canvas and I stuck at animation. I have the Row with Canvas and vertical Bars, when I click on a bar, it gets selected and background of this bar changes. What I would love to achieve is that this background will animate from bottom to top on each click, so the user will have nice click experience. Demo in 🧵
Basically, I need to use animateFloatAsState to animate height, but I do not know how to reset this on each click on next bar in the chart.

[Piotr Prus]

[Zach Klippenstein (he/him) [MOD]]

Might need to use an Animatable directly. See here.

[Doris Liu]

If you need to have the bar animate again when clicking on the same item again, I'd recommend Animatable. Otherwise, you could consider having an animateFloatAsState for each Bar, and animate to full height when clicked, and reset when unclicked.

[Piotr Prus]

Thanks for the references and suggestions. I tried animatable and animateFloatAsState before, but have problems with resetting. The key to final result was two separate variables, one that holds state of temporary animation and one for final(selected) animation. I used Animatable, cause it has function snapToValue that I can use to reset the progress. I will try to write article about this later this week. 🙂 I will share when finished

[Doris Liu]

Curious, what the reason for holding a state for temporary animation? What's the temporary animation?

[Piotr Prus]

The temp animation is for press gesture, long click or cancel.

untitled.webm