CustomizedLookaheadAnimationVisualDebugging

@Composable
@ExperimentalLookaheadAnimationVisualDebugApi
public fun CustomizedLookaheadAnimationVisualDebugging(
    debugColor: Color,
    content: @Composable () -> Unit,
)

Allows customizing a particular shared element or animated bounds animation for debugging. Note that enabling CustomizedLookaheadAnimationVisualDebugging 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.

An example of how to use it:

Parameters

Code Examples

CustomizedLookaheadAnimationVisualDebuggingSample

@OptIn(ExperimentalLookaheadAnimationVisualDebugApi::class)
@Composable
fun CustomizedLookaheadAnimationVisualDebuggingSample() {
    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 {
        // Wrap content with CustomizedLookaheadAnimationVisualDebugging to customize the color of
        // the bounds visualizations in the specified scope.
        CustomizedLookaheadAnimationVisualDebugging(Color.Black) {
            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)
                    )
                }
            }
        }
    }
}