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

galex

07/24/2020, 10:12 AM
Basically I would like to animate the rect of the root Composable till it reaches its full size, any pointers? 😊
m

molikto

07/24/2020, 10:14 AM
a surface or scaffold will have a solid color background. did you use one?
g

galex

07/24/2020, 10:14 AM
yes indeed
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
f

Fudge

07/24/2020, 11:13 AM
there is
invalidate
which is supposed to recompose
g

galex

07/24/2020, 11:14 AM
Thanks!
f

Fudge

07/24/2020, 11:15 AM
I don't think that's the idiomatic way of doing it though, there's probably a way to rely on state changes
I don't really understand the conversation following your original question, my answer to the question would be
Copy code
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
g

galex

07/24/2020, 11:26 AM
Yeah the conversation was answering my other question. Thank you I’ll look at that
f

Fudge

07/24/2020, 11:26 AM
al lo davar
d

Doris Liu

07/24/2020, 10:32 PM
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?
Can it be done ? Do you any pointers on how to approach this?
d

Doris Liu

07/25/2020, 4:54 AM
Is it the one titled "Material Transform" that you are trying to replicate?
g

galex

07/25/2020, 4:55 AM
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?
d

Doris Liu

07/25/2020, 5:02 AM
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. 🙂
g

galex

07/25/2020, 5:36 AM
I'll try to do that yes
d

Doris Liu

07/25/2020, 5:55 AM
I'm playing with a prototype that does the material transform. It's looking promising so far... 🙂
Ok, not too much effort actually, ~100 lines of code
Copy code
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)
        }
    }
}
Let me know whether that works for you. 🙂
g

galex

07/25/2020, 7:49 AM
Wow I can test right now, but will in a bit, So exciting!!!!