Introduction to MotionLayout in Compose

For those new to MotionLayout.

MotionLayout's core engine allows you to interpolate between two constraintSet With Transitions and keyframes controlling the transitions.

<SideNote:
The full MotionLayout has many features (See ConstraintLayout 2.1)
The first release of MotionLayout in ConstraintLayoutCompose 1.0 focuses on a limited subset using the json syntax.
The hope is that users will provide feedback to allow us to tailor the API to developer needs. 

MotionLayout for Compose takes on of:

• Two ConstraintsSet (start & end), a Transition, and progress
• A MotionScene and progress

See Introduction to ConstraintLayout for more details on ConstraintSets

fun MotionLayout(
    start: ConstraintSet,
    end: ConstraintSet,
    transition: androidx.constraintlayout.compose.Transition? = null,
    progress: Float,
    debug: EnumSet<MotionLayoutDebugFlags> = EnumSet.of(MotionLayoutDebugFlags.NONE),
    modifier: Modifier = Modifier,
    optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,
    crossinline content: @Composable MotionLayoutScope.() -> Unit
) {}

fun MotionLayout(
    motionScene: MotionScene,
    progress: Float,
    debug: EnumSet<MotionLayoutDebugFlags> = EnumSet.of(MotionLayoutDebugFlags.NONE),
    modifier: Modifier = Modifier,
    optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,
    crossinline content: @Composable() (MotionLayoutScope.() -> Unit),
) {}

Transition

Currently Transition Only supports a Transition String

e.g:

transition = Transition("""
            {
              KeyFrames: {
                KeyPositions: [
                {
                   target: ['a'],
                   frames: [50],
                   percentX: [0.8],
                   percentY: [0.8]
                }
                ]
              }
            }

Details on Transitions in json

MotionScene

Currently MotionScene Only supports a json syntax MotionScene JSON syntax