How to animate component repositioning on recomposition in Jetpack Compose? - animation

Question

I have two squares. The green one is constrained to the top, and the blue one is constrained between the green one and the bottom of the screen. When clicking on the blue square, the green square doubles in size. Since the size of the green square increases, the blue square moves downwards because of its constraints.
How do I animate the position change of the blue square? Do I have to manually calculate and animate the offset? This feels very hacky. I feel like this should be doable declaratively, since the new position is automatically calculated by the updated constraints.
Edit: Basically, I'm looking for android:animateLayoutChanges, but for Compose.
Here is my code:
#Composable
fun AnimationTest() {
ConstraintLayout(
modifier = Modifier.fillMaxSize()
) {
val (block1, block2) = createRefs()
var blockSize by remember { mutableStateOf(20.dp) }
Surface(
color = Color.Green,
modifier = Modifier
.size(blockSize)
.constrainAs(block1) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
) {}
Surface(
color = Color.Blue,
modifier = Modifier
.size(50.dp)
.constrainAs(block2) {
top.linkTo(block1.bottom)
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
.clickable {
blockSize *= 2
}
) {}
}
}

Answer 1

Try wrapping it inside the AnimatedContent composable. Though it is ConstraintLayout so I don't think it would work, but it just might. Give it a try and let me know. Otherwise, it is a very simple scenario, and can be easily achieved with the Layout composable, inside which you can use lerp() to achieve the animation