Wednesday, April 24, 2013

Basic animations in Andorid



I would like to note down the basic animations which I worked out in Android.
  
Let us start with some attributes and tags before we actually start writing down the anim.xml 

  • translate - Tag to translate the view from certain x% to certain x% 
  • ex : <translate android:toXDelta="0%p" android:fromXDelta="50%p"/> 
  • In the above ex, I'm transalating the view from 0% in parent to 100% in parent. 
  • If you want to start at the actual point of View remove p from 0%p and 100%p. This will animate from 0% of view's X position to 100% of view's X. 
  • alpha - Tag which mention's the visibility of the view over a particular interval of animation 
  • ex :<alpha android:duration="@android:integer/config_mediumAnimTime" android:toAlpha="1.0"android:fromAlpha="0.0"/> 
  • In above ex, fromAlpha value 0 represent's the view is in complete invisible state. Upon the duration the visibility increases. 
  •  The duration value is 400ms. So, the view will be compltely visibile after 400ms. 
  • duration - The amount of time to play animation. It is measured in milliseconds. 

Depending on the direction, duration of play and fading( alpha ) we can make many combinations of animations. I will discuss the main anim's which will be used very frequently. These are listed below. 

  • Left in 
  • Let out 
  • Right in 
  • Right Out 
  • Bottom in 
  • Bottom Out 
  • Top in  
  • Top Out  

Out of the above 8 types, if we understand first 2 then we can automatically write down others's easily.  

Left-In:  
     Meaning it will be started from left side of the parent and will pierce into the parent.XML will look like 

<set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="@android:integer/config_mediumAnimTime" android:fromXDelta="-50p%" android:toXDelta="0%p" /> <alpha android:duration="@android:integer/config_mediumAnimTime" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set>

The above animation will start from 50% outside the parent and will animate upto 0% of the parent while applying the alpha value within a duration of 400ms. 

Left-out: 
     Meaning it will be move out of it's parent starting at 0% of its parent and it will end at -50%.It will look like 

<set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="@string/anim_duration" android:fromXDelta="0%" android:toXDelta="-50%" /> <alpha android:duration="@android:integer/config_mediumAnimTime" android:fromAlpha="1.0" android:toAlpha="0" /> </set>  

Applying these animations to a view involves 3 steps. 
  • Load animation. 
  • Add animatinlistener to the animation. 
  • Apply animation to view. 

Load animation 
    Use the below piece of code to load xml. 
               Animation mLeftIn = AnimationUtils.loadAnimation(thisandroid.R.anim.left_in); 

Add AnimationListener 
     Better implement the Animation listener interface with your activity.Then add listener like this 
               mLeftIn.setAnimationListener(this); 

Apply Animation to view: 
     This is as simple as this 
             view.startAnimation(mLeftIn); 

And if you want to do certain actions while animations are playing, you can look into onAnimationStart(), onAnimationEnd() methods in AnimationListener. 
Our animation will play once executed with the code mentioned above. :) 

Other animations can be found below 

Right-in: 

<set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="@android:integer/config_mediumAnimTime" android:fromXDelta="50%p" android:toXDelta="0" /> <alpha android:duration="@android:integer/config_mediumAnimTime" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set> 

Right-out: 

<
set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="@android:integer/config_mediumAnimTime" android:fromXDelta="0%p" android:toXDelta="50%p" /> <alpha android:duration="@android:integer/config_mediumAnimTime" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set> 

Top-In: 

<set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="@android:integer/config_mediumAnimTime" android:fromYDelta="-50%" android:toYDelta="0%" /> <alpha android:duration="@android:integer/config_mediumAnimTime" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set> 

Top-out: 

<set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="@string/anim_duration" android:fromYDelta="50%p" android:toYDelta="0%p" /> <alpha android:duration="@android:integer/config_mediumAnimTime" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set> 

Bottom-in: 

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

Bottom-Out: 

<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" > <translate android:duration="@string/anim_duration" android:fromYDelta="0%" android:toYDelta="100%" /> <alpha android:duration="@android:integer/config_mediumAnimTime" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set> 

This are some of the basic animations. 

No comments:

Post a Comment