ViewTransition

ViewTransition is a new tag that enables single view animations within MotionLayout. With ViewTransition you can change a single view within MotionLayout.

The attributes

 <ViewTransition
        android:id="@+id/spin_equ"
        motion:motionTarget="@+id/button10"
        motion:viewTransitionMode="noState"
        motion:onStateTransition="actionDown"
        motion:duration="600"
        motion:pathMotionArc="none"
        motion:motionInterpolator="linear"
        motion:setsTag="@id/sets_tag_on_done"
        motion:clearsTag="@id/clears_tag_on_done"
        motion:ifTagSet="@id/only_run_if_set"
        motion:ifTagNotSet="@id/only_run_if_not_set"
      >
     <ConstraintOverride ....> 
       <CustomAttribute ...\>
     </ConstraintOverride>
    
    <KeyFrameSet>
         ...
    </KeyFrameSet>
  </ViewTransition>

• id is used for invoking a View Transition with motionLayout.viewTransition(id, view...)
• motionTarget may be used to define the view or collection of views in conjunction with layout_constraintTag
• viewTransitionMode defines 3 major modes of ViewTransition currentState, allStates and noState. (noState runs asynchronously per view)
• onStateTransition allows the ViewTransition on actionDown or actionUp
• duration duration of the transition in milliseconds (same as <Transition>)
• transitionDisable allows you to have disabled ViewTransitions which can be enabled with motionLayout.enableViewTransition(id)
• pathMotionArc views move in quarter ellipses (same as )
• motionInterpolator defines how the transition will animate easing (same as )
• setsTag on completion of a ViewTransition on a view it calls view.setTag(id, System.nanoTime)
• clearsTag on completion of a ViewTransition on a view it calls view.setTag(id, null)
• ifTagSet ViewTransition will not run if view.getTag(id) == null
• ifTagNotSet ViewTransition will not run if view.getTag(id) != null

The below examples and many more can be found in this layout and MotionScene

#Eample 1 Simple Popup

    <ViewTransition
        android:id="@+id/pop"
        motion:onStateTransition="actionDownUp"
        motion:motionTarget="@+id/button1"
        motion:viewTransitionMode="noState"
        motion:duration="300">
        <KeyFrameSet>
            <KeyAttribute
                motion:framePosition="100"
                android:scaleX="1.5"
                android:scaleY="1.5"
                />
        </KeyFrameSet>
    </ViewTransition>

This scales the button up when pressed and collapses it when released.

#Example 2 Fancy Pop Button

    <ViewTransition
        android:id="@+id/bigPop2"
        motion:onStateTransition="actionDownUp"
        motion:motionTarget="@+id/button15"
        motion:viewTransitionMode="noState"
        motion:duration="3000"
        motion:upDuration="300"
        >

        <KeyFrameSet>

            <KeyAttribute
                motion:framePosition="100"
                android:scaleX="3"
                android:scaleY="3"
                />
            <KeyTimeCycle
                motion:framePosition="0"
                motion:wavePeriod="4"
                android:rotation ="0"
                />
            <KeyTimeCycle
                motion:framePosition="80"
                motion:wavePeriod="4"
                android:rotation ="0"
                />
            <KeyTimeCycle
                motion:framePosition="99"
                motion:wavePeriod="4"
                android:rotation ="20"
                />

        </KeyFrameSet>
    </ViewTransition>

More elaborate popup with shake button if you long press

#Example 3 Removes the button for the current state

    <ViewTransition
        android:id="@+id/gone"
        motion:onStateTransition="actionUp"
        motion:motionTarget="@+id/button3"
        motion:viewTransitionMode="currentState"
        motion:duration="300">
        <ConstraintOverride android:visibility="gone"/>
    </ViewTransition>