What is the syntax for adding multiple transitions...
# compose
f
What is the syntax for adding multiple transitions to a MotionLayout using JSON5? The 'default' transition works, but the 'other' transition has no effect. The offical docs only show an example with a 'default' transition in JSON5.
motion_scene.json5
Copy code
{
  ConstraintSets: {
    start: {
      contentBg: {
        width: 'spread',
        height: 'spread',
        start: ['parent', 'start', 100],
        end: ['parent', 'end', 100],
        top: ['parent','top'],
        bottom: ['parent','bottom'],
      }
    },
    endRight: {
      contentBg: {
        width: 'spread',
        height: 'spread',
        start: ['parent', 'start', 100],
        end: ['parent', 'end'],
        top: ['parent','top'],
        bottom: ['parent','bottom'],
      }
    },
    endLeft: {
      contentBg: {
        width: 'spread',
        height: 'spread',
        start: ['parent', 'start'],
        end: ['parent', 'end', 100],
        top: ['parent','top'],
        bottom: ['parent','bottom'],
      }
    }
  },
  Transitions: {
    default: {
      from: 'start',
      to: 'endRight',
      onSwipe: {
        anchor: 'contentBg',
        direction: 'right',
        side: 'right',
      }
    },
    other: {
      from: 'start',
      to: 'endLeft',
      onSwipe: {
        anchor: 'contentBg',
        direction: 'left',
        side: 'left',
      }
    }
  }
}
MainActivity.kt:
Copy code
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(
                modifier = Modifier.fillMaxSize()
            ) {
                val context = LocalContext.current
                val motionScene = remember {
                    context.resources
                        .openRawResource(R.raw.motion_scene)
                        .readBytes()
                        .decodeToString()
                }
                val progress by remember {
                    mutableFloatStateOf(0F)
                }

                MotionLayout(
                    motionScene = MotionScene(content = motionScene),
                    progress = progress,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Green)
                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxHeight()
                            .background(Color.Blue)
                            .layoutId("contentBg")
                    )
                }
            }
        }
    }
}