guys, is it possible to make morphing animations i...

# compose

[deviant]

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

[MR3Y]

• https://github.com/android/animation-samples/tree/main/MotionCompose
• Also, You might use AnimatedContent like : https://gist.github.com/c5inco/38e5075a883e5cc1136308bd3c44686d

[deviant]

still don't get how to morph. it fades instead of morph

[MR3Y]

which approach have you tried ? this one: https://github.com/android/animation-samples/blob/main/MotionCompose/app/src/main/[…]roid/compose/motion/demo/sharedtransform/SharedTransformDemo.kt isn't achieving the desired result?

[deviant]

i made it! wrapped the animated content into surface and now it looks very fancy

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)
                    }
                }
            }
        }

[Colton Idle]

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?

[deviant]

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

[Colton Idle]

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?

[deviant]

yes. it's the same view. i'm waiting for shared transition implementation too. i've been told that it is under development.

[Colton Idle]

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

[Doris Liu]

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!