Animation with Navigation

 Animation in Navigation 

• Animations usually helps to understand the flow of the application 
• This transitions are controlled by XML animation resources. 
• There are several different types of animations in Android but we are focusing on View Animations which describe a transformation of a single view or view group. 

We will check 2 kinds of animation

• Alpha animation 
• Translation animation 

But the framework also have other animations like rotation and scale animations. The framework includes predefined animation resources and the navigation component also include some default animations, but it's fun to create our own. 

Use Case:

• Create new Animation from android resource. This gives a resource of type set. We can add one or more command in our set and have them run together or sequentially. We can have sets within sets. But single animation is also good. 
• Create animation 
• Apply the animation from navigation graph selecting the action and adding the desired animation 
• Enter : this animation is played when we navigate to fragment 
• Exit : if we navigate to another fragment this animation is played 
• Pop Enter : this transaction animation is played when fragment is popped from back stack  previous 
• Pop Exit : animation played on current fragment from back button press 

Alpha 

• It describes how transparent something is. 
• 0% alpha : View is invisible 
• 100 % alpha : View will be opaque. 
• we create alpha animation with <alpha> tag 

fade_in animation 

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

fade_out animation 

<alpha
    android:duration="@android:integer/config_mediumAnimTime"
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />

Translate Animation

• It can use twice the information as Alpha animation because we control the change in X and the change in Y. 
• Changes in X and Y are in percent offset where 
• 100 % X : offscreen right 
• -100 % X : offscreen left 
• 0 % X : no offscreen 
• from 100 % Y to 0 % Y : will slide the fragment in from offscreen bottom  
• from -100 % Y  to 0 % Y : will slide the fragment in from offscreen top  

slide_in_left animation 

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

slide_in_right animation 

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>