Jetpack Compose - MotionLayout

Question

相当于什么:

<Transition
    motion:constraintSetEnd="@id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1500"
    motion:motionInterpolator="linear">
    <OnSwipe
        motion:dragDirection="dragUp"
        motion:touchAnchorId="@id/view1"
        motion:touchAnchorSide="top" />
</Transition>

关于 Compose 的 MotionLayout？ 我在这两个链接上都没有看到答案：

https://github.com/androidx/constraintlayout/wiki/Introduction-to-MotionLayout-in-Compose https://github.com/androidx/constraintlayout/wiki/Compose-MotionLayout-JSON-Syntax

我只想在手动滚动时为场景设置动画，而不是像示例中那样通过单击按钮来动画。

谢谢！

Answer 1

Compose 中的 MotionLayout 尚未内置支持。

Compose 具有滑动处理功能
一种方法如下所示：

var componentHeight by remember { mutableStateOf(1000f) }
val swipeableState = rememberSwipeableState("Bottom")
val anchors = mapOf(0f to "Bottom", componentHeight to "Top")
val mprogress = (swipeableState.offset.value / componentHeight)

然后将进度传递到 MotionLayout Composable 中。

  MotionLayout(motionScene = "",  progress = mprogress, ...)

这里是一个如何编码的示例。

Answer 2

从

androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha01

开始，您现在可以在

onSwipe

中使用

MotionScene

设置进行交易：

MotionScene {
    val anchorComposable = createRefFor("someId")
    val state1 = constraintSet {
        //some constraints
    }
    val state2 = constraintSet {
        //some constraints
    }

    transition(state1, state2, "default") {
        onSwipe = OnSwipe(
            anchor = anchorComposable,
            direction = SwipeDirection.Up,
            side = SwipeSide.Top,
        )
    }
}

将此场景传递给

MotionLayout

，您将获得所需的滑动效果。不幸的是，它们仍然没有 xml

MotionLayout

的所有功能，即没有

TransitionListener

，因此无法检查滑动是否开始或完成。另一个重要的缺点是所有可点击的可组合项都被排除在可滑动区域之外。