-
Notifications
You must be signed in to change notification settings - Fork 176
ViewTransition
ViewTransition is a new tag that enables single view animations within MotionLayout. With ViewTransition you can change a single view within MotionLayout.
<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
#Running a View Transition There are 3 ways to run a viewTransiion
- The view transition fires itself using motion:onStateTransition=".."
- KeyTrigger can launch a view transition (allowing objects to react to hitting a point during progress or collision)
- Launch programmatically
##Launching a View transition from code. MotionLayout has a few API's for working with ViewTransition
// Execute a ViewTransition.
// Transition will execute if its conditions are met and it is enabled
public void viewTransition(int viewTransitionId, View... view) { }
//Enable a ViewTransition ID.
public void enableViewTransition(int viewTransitionId, boolean enable) { }
// Is transition id enabled or disabled
public boolean isViewTransitionEnabled(int viewTransitionId) { }
// Apply the view transitions keyFrames to the MotionController.
// Note ConstraintOverride is not used
public boolean applyViewTransition(int viewTransitionId, MotionController motionController) { }
View Ttransitions allow you to separate the action from the animation. For example if you setVisiblity(invisibile) it will instantly be removed from the screen having a transition allows the motion designer the ability to animate the removal.
#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>