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

Gabriel Melo

03/08/2021, 9:27 PM
This is probably something easy I'm missing, but is there an easy way to animate between ImageVector states? I couldn't find an appropriate animate*AsState nor a suitable TwoWayConverter to use with animateValueAsState. For context, the icon is chosen according to a Boolean value (which also lacks an animate*AsState function).
d

Doris Liu

03/08/2021, 9:41 PM
g

Gabriel Melo

03/08/2021, 9:42 PM
No, I want to animate between ImageVectors. No XML involved.
d

Doris Liu

03/08/2021, 9:50 PM
Do the ImageVectors that you are trying to animate in between have the same number of ``VectorGroup/Path``s, or are you looking for a way to automatically morph in-between any arbitrary pair of `ImageVector`s? cc+ @Nader Jawad
g

Gabriel Melo

03/08/2021, 9:51 PM
The second option. I tried the Crossfade API, but it didn't have the effect I'm looking for.
i

Ian Lake

03/08/2021, 11:24 PM
What type of effect are you hoping for? I'm having a hard time imagining something that that works with any two vectors since there's an arbitrarily large number of possible transitions (how would the system know what type of transition you want?)
n

Nader Jawad

03/09/2021, 1:01 AM
In order for path morphing to work properly each vector would need to same number of paths/groups with the same path commands and then the path parameters can be interpolated. Otherwise some other approach such as cross fading would be necessary
g

Gabriel Melo

03/09/2021, 1:34 AM
I see. So for creating a custom transition animation between vectors (be they easily morphable or not) which compose animation API would be appropriate?
d

Doris Liu

03/09/2021, 1:45 AM
Transition
would be the API I recommend. Here's an example: https://cs.android.com/androidx/platform/frameworks/support/+/836a71075115a60c7dd8e5[…]/java/androidx/compose/ui/demos/AnimatedVectorGraphicsDemo.kt Lottie is a great option for your use case as well. 🙂
👀 1