Simple Modifier.animateBounds() example

AnimateBounds.kt

@OptIn(ExperimentalSharedTransitionApi::class)
@Preview
@Composable
private fun AnimateBoundsSimple() {
    // We need the SharedTransitionLayout in order for the animateBounds modifier to have a 
    // lookaheadScope to use. 
    SharedTransitionLayout {
        var position by remember {
            mutableStateOf(true)
        }
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)) {
            Box(
                modifier = Modifier
                    .clickable {
                        position = !position
                    }
                    .align(if (position) Alignment.TopCenter else Alignment.BottomEnd)
                    // We add the animateBounds modifier passing in the lookaheadScope, and a 
                    // custom boundsTransform to indicate how long it should take. 
                    .animateBounds(
                        lookaheadScope = this@SharedTransitionLayout,
                        boundsTransform = { _, _ ->
                            tween(3000)
                        }
                    )
                    .size(50.dp)
                    .background(Color(0xFFF06292), CircleShape)
            )
        }
    }
}

animateBounds.mp4