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.
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.
โ 1
p
Piotr Prus
11/17/2021, 9:58 AM
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
d
Doris Liu
11/17/2021, 10:57 PM
Curious, what the reason for holding a state for temporary animation? What's the temporary animation?
p
Piotr Prus
11/18/2021, 7:34 AM
The temp animation is for press gesture, long click or cancel.