Compose MotionLayout JSON Syntax

Overview

This is an early release of MotionLayout. Our first emphasis is on developing the JSON syntax. Eventually we will support direct implementation in Kotlin. The Functionality operates identically to the 2.1 MotionLayout equivalent.

Basic Sections

{
  Debug:{}
  Design:{}
  Variables:{}
  ConstraintSets:{}
  Transitions: {
       // Transition Named default (special name)
      default:{
          KeyFrames:{
              KeyPositions: {}
              KeyAttributes: {}
              KeyCycles: {}
          }
      }
  }
}

Debug

This allows you to export the current string for Realtime remote editing

Design

This allows you to create widgets (currently only text and button)

Variables

This allows you to define variables that can be used multiple times across the entire string

ConstraintSets

The pattern is typically

setId1:{  // setId1 is the name of the ConstraintSet equivalent to <ConstraintSet android:id="@id/setId1" ...>
     widgetId1{ ...} // widgetId1 is the id of the widget equivalent of <Constraint android:id="@id/..." ...>
     widgetId2{ ...}
     widgetId3{ ...}
      }
setId12:{ 
     widgetId1{ ...}
     widgetId2{ ...}
     widgetId3{ ...}
      }
}

Example:

    ConstraintSets: {
                  start: {
                    a: {
                      width: 40,
                      height: 40,
                      start: ['parent', 'start', 16],
                      bottom: ['parent', 'bottom', 16]
                    }
                  },
                  end: {
                    a: {
                      width: 40,
                      height: 40,
                      end: ['parent', 'end', 16],
                      top: ['parent', 'top', 16]
                    }
                  }
                }

Transitions

Transitions is a container for all transitions. Each Transition is given a name. The name "default" is special and defines the initial transition.

Transitions: {
    default: {
        from: 'start',
        to: 'end',
        pathMotionArc: 'startHorizontal',
        KeyFrames: {
        KeyPositions: [
            {
            target: ['a'],
            frames: [25, 50, 75],
            percentX: [0.4, 0.8, 0.1],
            percentY: [0.4, 0.8, 0.3]
            }
        ],
        KeyCycles: [
            {
                target: ['a'],
                frames: [0, 50, 100],
                period: [0 , 2 , 0],
                rotationX: [0, 45, 0],
                rotationY: [0, 45, 0], 
            }
        ]
    }
}

The above is a transition from ConstraintSet "start" to ConstraintSet "end" paths with move in an Arc (quarter ellipse) starting horizontally. It also contains Keframes of type keyCycle and KeyPosition.

KeyFrames

We currently only support 3 types of keyFrames.

• KeyPosition -
• KeyAttributes - Miniplate a view Transform KeyAttributes Video
• KeyCycle - Produce repeating patterns.KeyCycle Video KeyPosition KeyCycle KeyAttributes

KeyPositions

KeyAttributes

KeyCycles