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

deviant

08/12/2022, 12:09 PM
guys, is it possible to make morphing animations in compose? like we did with MaterialContainerTransform api. something like this. basically i need to morph my FAB into popup menu
d

deviant

08/12/2022, 12:52 PM
still don't get how to morph. it fades instead of morph
m

MR3Y

08/12/2022, 12:56 PM
d

deviant

08/12/2022, 1:34 PM
i made it! wrapped the animated content into surface and now it looks very fancy
Copy code
val updater = updateTransition(isExpanded, "updater")
        val cornerAnimated by updater.animateInt(label = "corner") {
            if (it) 10 else 50
        }
        Surface(
            color = MaterialTheme.colors.secondary,
            elevation = 16.dp,
            modifier = Modifier
                .clip(RoundedCornerShape(percent = cornerAnimated))
        ) {
            updater.AnimatedContent(
                transitionSpec = { fadeIn() with fadeOut() using SizeTransform() }
            ) { expanded ->

                if (!expanded) {
                    Box(
                        modifier = Modifier
                            .defaultMinSize(minWidth = 56.dp, minHeight = 56.dp)
                            .clickable {
                                isExpanded = true
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        Icon(
                            Icons.Default.Share, null, modifier = Modifier
                            //.padding(8.dp)
                        )
                    }
                } else {
                    Column {
                        MenuItem(Icons.Default.Link, stringResource(R.string.share_link), onShareUrl)
                        MenuItem(Icons.Default.Image, stringResource(R.string.share_img), onShareImage)
                    }
                }
            }
        }
c

Colton Idle

08/13/2022, 8:19 AM
Wait what?!?! I didn't think shared element transitions where a thing yet. But I guess this anim isn't a shared element? It's just resizing an element on the screen?
d

deviant

08/13/2022, 8:22 AM
basically yes. it's not a shared transition. i do crossfading for both source and target contents. and do the resizing for the container (with some corner radius animation). it's rather analog of MaterialContainerTransform api for legacy views
c

Colton Idle

08/13/2022, 8:23 AM
Interesting. So both your fab and the "view" you "open" are on the same screen, right? Or are you somehow transforming a FAB into a new screen entirely?
d

deviant

08/13/2022, 8:25 AM
yes. it's the same view. i'm waiting for shared transition implementation too. i've been told that it is under development.
c

Colton Idle

08/13/2022, 8:35 AM
yeah. i think the framework code has been added to support it. and i think it was actually implemented by a solo dev last month https://github.com/skydoves/Orbital
d

Doris Liu

08/15/2022, 8:25 PM
Putting the
AnimatedContent
in a
Surface
will give you a close look to ContainerTransform, although it won't scale the incoming or outgoing content to fit in the resizing container. Container transform is something we are looking at to support in the near future. Shared element is being actively worked on. We have built & released a fundamental pre-requisite to shared element -
LookaheadLayout
. It allows a pre-calculation of size & position of any layout change, therefore allowing layout changes to be animated. Orbital lib linked above leverages the latest features in LookaheadLayout. Highly recommend trying it out!
6 Views