Compose MotionLayout DSL Syntax

Added first in 1.1.0-alpha04.

Overview

MotionScene

The MotionScene takes a collection of ConstraintSets and Transitions.

Each ConstraintSet represents a specific Layout and each Transition represents the animation description between two ConstraintSets.

So the most basic MotionLayout requires two ConstraintSets and a default Transition that defines the initial state.

MotionLayout(
    MotionScene { // this: MotionSceneScope
        val textRef = createRefFor("text")
        defaultTransition(
            from = constraintSet { // this: ConstraintSetScope
                constrain(textRef) { // this: ConstrainScope
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                }
            },
            to = constraintSet { // this: ConstraintSetScope
                constrain(textRef) { // this: ConstrainScope
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                }
            }
        ) { // this: TransitionScope
            onSwipe = OnSwipe(
                anchor = textRef,
                side = SwipeSide.End,
                direction = SwipeDirection.End,
                mode = SwipeMode.Spring,
                onTouchUp = SwipeTouchUp.AutoComplete
            )
        }
    },
    progress = 0f,
    Modifier.fillMaxSize()
) {
    Text("Hello, World", Modifier.layoutId("text"))
}

Adding Existing ConstraintSets

All ConstraintSets and Transitions must be defined within the scope of the MotionScene. You may add existing ConstraintSet or Transition objects with addConstraintSet and addTransition respectively.

Note that the name given to the ConstraintSets should match the names defined in the Transition.

val cSet1 = ConstraintSet { }
val cSet2 = ConstraintSet { }
val transition = Transition(from = "start", to = "end") { }
MotionScene {
    addConstraintSet(name = "start", cSet1)
    addConstraintSet(name = "end", cSet2)
    addTransition(name = "default", transition)
}

Transition

OnSwipe

KeyFrames

ConstraintSet

See ConstraintSet DSL.