Skip to content

Compose MotionLayout JSON Syntax

Jump to bottom
John Hoford edited this page Jul 20, 2021 · 9 revisions

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. All types of key frames will have the following:

  • target - id's of the key widgets that these key positions apply
  • frames - The position on the frames of each of the keys

For people familiar with MotionLayout in 2.x this is a more compact expression. For each target, for each frame a keyFrame is generated. i.e.

                target: ['a', 'b'],
                frames: [0, 50, 100],
                 // will generate 6 key frames

KeyPositions

  • percentWidth
  • percentHeight
  • sizePercent
  • percentX
  • percentY

KeyAttributes

  • frame - The widgets to transform
  • target - the key frames
  • curveFit - interpolate between points using linear interpolation or a monotonic spline
  • alpha - how transparent the widget should be.
  • rotationZ - post layout rotate the widget
  • rotationX - post layout rotate about a horizontal axis
  • rotationY - post layout rotate about a vertical axis
  • pivotX - post layout the point around which to rotate
  • pivotY - post layout the point around which to rotate
  • pathRotate - The angle with respect to the path of the widget to rotate
  • scaleX - post layout
  • scaleY - post layout
  • translationX - post layout move the widget to the right
  • translationY - post layout move widget down
  • translationZ - post layout move widget towards the viewer expanding its shadow

(Not implemented yet pivotTarget, easing, progress )

KeyCycles

  • offset - the center of the wave
  • phase - the phase angle of the wave in this area
  • period - the number of waves to generate in this area
  • frame - The widgets to transform
  • target - the key frames
  • curveFit - interpolate between points using linear interpolation or a monotonic spline
  • alpha - how transparent the widget should be.
  • rotationZ - post layout rotate the widget
  • rotationX - post layout rotate about a horizontal axis
  • rotationY - post layout rotate about a vertical axis
  • pivotX - post layout the point around which to rotate
  • pivotY - post layout the point around which to rotate
  • pathRotate - The angle with respect to the path of the widget to rotate
  • scaleX - post layout
  • scaleY - post layout
  • translationX - post layout move the widget to the right
  • translationY - post layout move widget down
  • translationZ - post layout move widget towards the viewer expanding its shadow

(Not implemented yet pivotTarget, easing, progress ,waveShape )

Clone this wiki locally