How tom chain several transitions?

Question

Hot to play transitions one after another in motionlayout to make it look as single animation? While keyframe can be used to make intermediate states between two constaintset they are also limited and cannot modify all desired properties.

    <Transition

        app:constraintSetEnd="@layout/simple_start"
        app:constraintSetStart="@layout/simple_middle"

        >
        <OnSwipe
            app:dragDirection="dragUp"
            app:touchAnchorId="@id/scrollable"
            app:touchAnchorSide="top" />

    </Transition>
    <Transition

        app:constraintSetEnd="@layout/simple_middle"
        app:constraintSetStart="@layout/simple_end"

        >
        <OnSwipe
            app:dragDirection="dragUp"
            app:touchAnchorId="@id/scrollable"
            app:touchAnchorSide="top" />

    </Transition>

</MotionScene>

Answer 1

override fun onClick(v: View) {

    when (v.id) {
        R.id.likeView -> {                  
       motionLayout.setTransition(R.id.start_first_set,R.id.end_first_set)
       motionLayout.transitionToEnd() // start first anime
        }
   }

   motionLayout.setTransitionListener(object : MotionLayout.TransitionListener{

  // .....

        override fun onTransitionCompleted(p0: MotionLayout?, id: Int) {
            when (id) {
                R.id.end_first_set -> {              
          motionLayout.setTransition(R.id.start_second_set,R.id.end_secons_set)
          motionLayout.transitionToEnd() // start second anime
           }
        }
    })