Jetpack Compose - 通过调整大小显示 animation

Question

通过使用此代码

val composableHeight = 200.dp
var composableWidthPx by remember { mutableStateOf(1000f) }
val composableWidth = with(LocalDensity.current) { composableWidthPx.toDp() }
val draggableState = rememberDraggableState(onDelta = {
    composableWidthPx += it
})
Row(
    modifier = Modifier
        .width(composableWidth)
        .height(composableHeight)
        .padding(48.dp)
        .draggable(draggableState, Orientation.Horizontal)
        .background(Color.Red)
) {
    Icon(
        modifier = Modifier.requiredSize(100.dp),
        imageVector = Icons.Default.Add,
        contentDescription = null
    )
}

我得到以下结果

我想要的是让Icon保持固定的 position，具有固定的大小，如果我滑过图标，我希望隐藏相应的部分。 所以，这基本上是一个揭示 animation。

关于如何实现它的一些想法？

（你也可以想出一个更好的问题标题。）

编辑：

一些想要的结果的图片：

Answer 1

我想出了一些我使用clipToBounds （感谢 Pylyp）和offset的东西。

val composableHeight = 100.dp
var composableWidthPx by remember { mutableStateOf(1000f) }
val composableWidth = with(LocalDensity.current) { composableWidthPx.toDp() }
val draggableState = rememberDraggableState(onDelta = {
    composableWidthPx += it
})
val iconSize = remember { 100.dp }
Row(
    modifier = Modifier
        .padding(48.dp)
        .width(composableWidth)
        .height(composableHeight)
        .draggable(draggableState, Orientation.Horizontal)
        .background(Color.Red)
        .clipToBounds()
) {
    Icon(
        modifier = Modifier
            .requiredSize(iconSize)
            .offset(
                maxOf(0.dp, (iconSize - composableWidth) / 2)
            ),
        imageVector = Icons.Default.Add,
        contentDescription = null
    )
}

如果有人能想出更好的办法，请这样做。