LookaheadAnimationVisualDebugging

LookaheadAnimationVisualDebuggingSample

@OptIn(ExperimentalLookaheadAnimationVisualDebugApi::class)
@Composable
fun LookaheadAnimationVisualDebuggingSample() {
    var isExpanded by mutableStateOf(false)
    // Wrap content with LookaheadAnimationVisualDebugging to enable visual debugging.
    // Optional parameters allow color customization and decision of whether to show key labels.
    // Note that enabling LookaheadAnimationVisualDebugging affects the entire UI subtree generated
    // by the content lambda. It applies to all descendants, regardless of whether they are defined
    // within the same lexical scope.
    LookaheadAnimationVisualDebugging(isShowKeyLabelEnabled = true) {
        SharedTransitionLayout(Modifier.fillMaxSize().clickable { isExpanded = !isExpanded }) {
            AnimatedVisibility(visible = isExpanded) {
                Box(
                    Modifier.offset(100.dp, 100.dp)
                        .size(200.dp)
                        .sharedElement(
                            rememberSharedContentState(key = "box"),
                            animatedVisibilityScope = this,
                        )
                        .background(Color.Red)
                )
            }
            AnimatedVisibility(visible = !isExpanded) {
                Box(
                    Modifier.offset(0.dp, 0.dp)
                        .size(50.dp)
                        .sharedElement(
                            rememberSharedContentState(key = "box"),
                            animatedVisibilityScope = this,
                        )
                        .background(Color.Blue)
                )
            }
        }
    }
}