What is the best way to animate the shape of a `Su...

# compose

[Ilias Zosimadis]

What is the best way to animate the shape of a Surface? Should I use a custom shape with createOutline or create a custom surface composable with Canvas ?

[Ali Albaali]

What are you trying to animate? If it's something trivial such as corners width, surface size or color then that's can be done easily with animateFooAsState API.

[Ilias Zosimadis]

I 'm trying to create something like this https://dribbble.com/shots/10004383-Bottom-Navigation-Tab-Bar-concept-for-Zappfresh-Mobile-App

[Albert Chang]

Here's how I'm doing it.
https://github.com/mxalbert1996/compose-shared-elements/blob/main/shared-elements/src/main/java/com/mxalbert/sharedelements/SharedMaterialContainer.kt#L234

[Ilias Zosimadis]

So you are creating a new shape for each fraction of your animation. That's one solution but you can also do the same thing if you create a custom Surface and use your fraction there. What do you think is the best solution (or the recommended way) between these two?

[Andrey Kulikov]

I think creating a shape for each fraction is fine. note that Shape implementations should be immutable, so you have to recreate a shape object if you changed something which describes the shape

[Albert Chang]

If you know the specific type of the shape then of course you can draw it manually but it is impossible at least in my use case as you don't know how the shape is drawn (i.e. how the outline is created). Even if you only support a subset of the shapes, you need a lot of boilerplate code.