Jetpack Compose - MotionLayout

Question

What is the equivalent of :

<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>

On MotionLayout for Compose ? I do not see the answear on both of those links :

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

I would like to animate my scene only if I manually scroll, not by clicking on a button like in the examples.

Thanks !

score 0 · Answer 1 · answered Nov 15 '21 at 23:02

0

MotionLayout in Compose has no built in support of (yet).

Compose has swipe handling
One approach looks like this:

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)

progress is then passed into the MotionLayout Composable.

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

Here is an examples how you would code it.

answered Nov 15 '21 at 23:02

hoford

4,918
2
19
19

Great ! This is exactly what I need ! Thank you. Do you know if it is possible to add a SwipeRefresh on top of the MotionLayout ? – Tonio Nov 16 '21 at 09:36
Other question : do you know how to make a verticalBias with that JSON syntax ? I do not find the paramater. – Tonio Nov 16 '21 at 10:13
To sump up, is there a link where I can find all different json values ? – Tonio Nov 16 '21 at 11:09
https://github.com/androidx/constraintlayout/wiki/ConstraintSet-JSON5-syntax – hoford Nov 17 '21 at 14:46

Jetpack Compose - MotionLayout

1 Answers1