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),
            ) {
                Text("Button #$it")
            }
        }
    }
}

SurfaceTransformationCardSample

@Preview
@Composable
fun SurfaceTransformationCardSample() {
    val transformationSpec = rememberTransformationSpec()
    var expandedIndex by remember { mutableIntStateOf(-1) }
    TransformingLazyColumn {
        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),
            ) {
                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),
            )
        }
    }
}