Question

我一直在使用手势来处理动画属性。我试图在此处创建类似于卡片展开/折叠的动画：https://dribbble.com/shots/3812962-iPhone-X-Todo-Concept/attachments/3812962-iPhone-X-Todo-Concept?mode=media。

我通过以下方式成功创建了动画：

val collapseWidth =  maxWidth - (48.dp * 2)
val collapseHeight = collapseWidth * 1.15f

val minHeight = with(LocalDensity.current) { collapseHeight.toPx() }
val maxHeight = with(LocalDensity.current) { maxHeight.toPx() }
val swipeableState = rememberSwipeableState(BoxState.Collapsed)
val anchors = mapOf(
    minHeight to BoxState.Collapsed,
    maxHeight to BoxState.Expanded,
)

然后为了协调宽度以通过滑动设置动画，我通过执行以下操作来计算滑动进度：

val swipeProgress = maxOf(swipeableState.offset.value - minHeight, 0f) / (maxHeight - minHeight)
        
val cardWidth by animateDpAsState(
    targetValue = lerp(collapseWidth, maxWidth, swipeProgress)
)

然后我应用属性：

Card(
    modifier = Modifier
        .width(cardWidth)
        .height(cardHeight)
        .swipeable(
            state = swipeableState,
            anchors = anchors,
            reverseDirection = true,
            thresholds = { _, _ -> FractionalThreshold(0.3f) },
            orientation = Orientation.Vertical,
         ),
    ...

这很有效，但我想知道是否有更好的方法来协调这些动画，因为手动计算 swipeProgress 似乎没有必要。

希望得到一些建议。

提前致谢！

Jetpack Compose：如何使用 SwipepableState 协调多个可设置动画的属性？

0 个答案: