Basically I would like to animate the rect of the ...

# compose

[galex]

Basically I would like to animate the rect of the root Composable till it reaches its full size, any pointers? 😊

[molikto]

a surface or scaffold will have a solid color background. did you use one?

[galex]

yes indeed

[galex]

And once Compose happened, it doesn’t do it again hiding the translucent background, meaning I need some way to tell Compose to recompose at that time

[Fudge]

there is invalidate which is supposed to recompose

[galex]

Thanks!

[Fudge]

I don't think that's the idiomatic way of doing it though, there's probably a way to rely on state changes

[Fudge]

I don't really understand the conversation following your original question, my answer to the question would be

var fullSize by state { false }
Box(Modifier.sizePercentage(animate(if(fullSize) 0 else 100)) {
   RootComposable()
}
// And then somewhere
fullSize = true

Note sizePercentage is not a real modifier, I don't know how it's called in Compose

[galex]

Yeah the conversation was answering my other question. Thank you I’ll look at that

[Fudge]

al lo davar

[Doris Liu]

Out of curiosity, when the rect of the root composable animates, what do you expect to see for the content composable? Scaling, re-layout based on the intermediate size, or just animating the the clip bounds without applying any effects to the content?

[galex]

@Doris Liu I would like to reproduce this blog post in Compose https://www.google.com/url?sa=t&source=web&rct=j&url=https://arunkumar.dev/seamless-android-app-launch-animations-using-intent-sourcebounds/&ved=2ahUKEwjhmuvwzOfqAhXMqaQKHV96B3cQFjAAegQIAhAB&usg=AOvVaw2PQUZntzVMn1nYOu8GN5cy

[galex]

Can it be done ? Do you any pointers on how to approach this?

[Doris Liu]

Is it the one titled "Material Transform" that you are trying to replicate?

[galex]

I would like to do the 3 of them! The circular reveal seemed the coolest, but starting with the Material Transform seems more realistic right?

[Doris Liu]

The example doesn't show how the content is being transformed as there's no content. I'm assuming it clips the content and reveals a little rect and expands to full screen. It should be doable, with some effort. 🙂

[galex]

I'll try to do that yes

[Doris Liu]

I'm playing with a prototype that does the material transform. It's looking promising so far... 🙂

[Doris Liu]

Ok, not too much effort actually, ~100 lines of code

material_transform.mp4

[Doris Liu]

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.fillMaxSize(), gravity = Alignment.Center) {
                Stack {
                    Box(Modifier.clipToBounds().materialTransform(500, 500)) {
                        val scaffoldState = remember { ScaffoldState() }
                        Scaffold(
                            scaffoldState = scaffoldState,
                            drawerContent = { Text("Drawer content") },
                            topBar = {
                                TopAppBar(
                                    title = { Text("Material Transform") },
                                    navigationIcon = {
                                        IconButton(onClick = {
                                        }) {
                                            Icon(<http://Icons.Filled.Menu|Icons.Filled.Menu>)
                                        }
                                    }
                                )
                            },
                            floatingActionButtonPosition = Scaffold.FabPosition.End,
                            bodyContent = { innerPadding ->
                                Text("Hello Material Transition")
                            }
                        )
                    }
                    FloatingActionButton(modifier = Modifier.gravity(Alignment.BottomEnd)
                        .padding(10.dp),
                        onClick = { /*do something*/ }) {
                        Icon(Icons.Filled.Favorite)
                    }

                }
            }
        }
    }
}

fun Modifier.materialTransform(startingWidth: Int, startingHeight: Int) = composed {
    this + MaterialTransform(startingWidth, startingHeight, AnimationClockAmbient.current)
}

class MaterialTransform(
    startingWidth: Int,
    startingHeight: Int,
    clock: AnimationClockObservable
) : LayoutModifier {
    val width = AnimatedFloatModel(startingWidth.toFloat(), clock)
    val height = AnimatedFloatModel(startingHeight.toFloat(), clock)
    override fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints,
        layoutDirection: LayoutDirection
    ): MeasureScope.MeasureResult {
        val placeable = measurable.measure(constraints = constraints)
        val targetWidth = placeable.width.toFloat()
        val targetHeight = placeable.height.toFloat()
        if (targetWidth != width.targetValue || targetHeight != height.targetValue) {

            val anim = repeatable<Float>(
                50,
                TweenSpec(durationMillis = 1000),
                repeatMode = RepeatMode.Reverse
            )
            width.animateTo(targetWidth, anim)
            height.animateTo(targetHeight, anim)
        }

        return layout(width.value.roundToInt(), height.value.roundToInt()) {
            placeable.place(0, 0)
        }
    }
}

[Doris Liu]

Let me know whether that works for you. 🙂

[galex]

Wow I can test right now, but will in a bit, So exciting!!!!