SurfaceTransformation

SurfaceTransformationButtonSample

@Preview
@Composable
fun SurfaceTransformationButtonSample() {
    val transformationSpec =
        rememberTransformationSpec(
            ResponsiveTransformationSpec.smallScreen(
                contentAlpha =
                    TransformationVariableSpec(
                        0f,
                        transformationZoneEnterFraction = 0.4f,
                        transformationZoneExitFraction = 0.8f,
                    ),
                containerAlpha = TransformationVariableSpec(0.3f),
            )
        )
    TransformingLazyColumn {
        items(count = 100) {
            Button(
                onClick = {},
                transformation = SurfaceTransformation(transformationSpec),
                modifier =
                    Modifier.transformedHeight(this, transformationSpec)
                        .minimumVerticalContentPadding(
                            ButtonDefaults.minimumVerticalListContentPadding
                        ),
            ) {
                Text("Button #$it")
            }
        }
    }
}

SurfaceTransformationCardSample

@Preview
@Composable
fun SurfaceTransformationCardSample() {
    val transformationSpec = rememberTransformationSpec()
    var expandedIndex by remember { mutableIntStateOf(-1) }
    val state = rememberTransformingLazyColumnState()
    AppScaffold {
        ScreenScaffold(state) { contentPadding ->
            TransformingLazyColumn(state = state, contentPadding = contentPadding) {
                items(count = 100) {
                    TitleCard(
                        onClick = { expandedIndex = if (expandedIndex == it) -1 else it },
                        title = { Text("Card #$it") },
                        subtitle = { Text("Subtitle #$it") },
                        transformation = SurfaceTransformation(transformationSpec),
                        modifier =
                            Modifier.transformedHeight(this, transformationSpec)
                                .minimumVerticalContentPadding(
                                    CardDefaults.minimumVerticalListContentPadding
                                ),
                    ) {
                        if (it == expandedIndex) {
                            Text("Expanded content #$it")
                        }
                    }
                }
            }
        }
    }
}

SurfaceTransformationOnCustomComponent

@Preview
@Composable
fun SurfaceTransformationOnCustomComponent() {
    @Composable
    fun MyCardComponent(
        title: String,
        body: String,
        transformation: SurfaceTransformation,
        modifier: Modifier = Modifier,
    ) {
        Column(
            modifier =
                modifier
                    .fillMaxWidth()
                    .paint(
                        transformation.createContainerPainter(
                            ColorPainter(color = Color.Gray),
                            shape = RoundedCornerShape(16.dp),
                        )
                    )
                    .graphicsLayer { with(transformation) { applyContainerTransformation() } }
                    .padding(horizontal = 16.dp, vertical = 8.dp)
        ) {
            Text(title)
            Text(body)
        }
    }
    val transformationSpec = rememberTransformationSpec()
    TransformingLazyColumn {
        items(count = 100) {
            MyCardComponent(
                "Message #$it",
                "This is a body",
                transformation = SurfaceTransformation(transformationSpec),
                modifier =
                    Modifier.transformedHeight(this, transformationSpec)
                        .minimumVerticalContentPadding(
                            CardDefaults.minimumVerticalListContentPadding
                        ),
            )
        }
    }
}