Sunday, January 30, 2011

World of animations in Android


Setting animations to a layout , programmatically is described as below. Its a good practice to clear any previously set animations prior to set new animation. Here we go:

Create an xml file (say “bottom_out.xml”) and place it inside a folder called “anim” down the “res” folder. Content of the bottom_out.xml file goes like below..

<?xml version="1.0" encoding="utf-8"?>
<set
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_interpolator">
     <translate
           android:fromYDelta="0%"
           android:toYDelta="60%"
           android:duration="700">
     </translate>
</set>

In place of “%”  you can use “%p”  indicating so many percent of its parent layout. Interpolator is to indicate how animation should proceed- say, it should be accelerated during end. Another interpolator is “linear_interpolator”.

myLayout (pointing to R.id.anim_layout) is a simple LinearLayout defined in xml file under “layout” folder. The necessary java code snippet goes down:

private void startAnimationPopOut()
{         
      LinearLayout myLayout =(LinearLayout)findViewById(R.id.anim_layout);
            
      Animation animation =AnimationUtils.loadAnimation(this,R.anim.bottom_out);

       animation.setAnimationListener(new AnimationListener()
       {                  
           @Override
           public void onAnimationStart(Animation animation) {
                               
           }
                    
           @Override
           public void onAnimationRepeat(Animation animation) {
          
           }
          
           @Override
public void onAnimationEnd(Animation animation) {
                          
           }
     });
            
     myLayout.clearAnimation();
     myLayout.startAnimation(animation);
          
}



Below are some of the samples I would like to share:
Sinking in:
<translate
     android:fromYDelta="70%"
     android:toYDelta="0%"
     android:duration="700">
</translate>

Slide from left side:
< translate
     android:fromXDelta="-100%p"
     android:toXDelta="0%"
     android:duration="600">
</ translate >

Slide from right side:

< translate
     android:fromXDelta="100%p"
     android:toXDelta="0%p"
     android:duration="600">
</ translate >

Rotate from 0 to 180 degree:

<rotate  
    android:fromDegrees="180"
    android:toDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="600">
 </rotate>

Here pivotX and PivotY are the x and y coordinates of center around which you wish the view to rotate.

Scale (here it is zooming in):

<scale                 
    android:toXScale="1.1"               
    android:fromXScale="1.0"             
     
    android:toYScale="1.1"
    android:fromYScale="1.0"
   
    android:pivotX="0%"
    android:pivotY="0%"
   
    android:startOffset="100"
    android:duration="2000">
 </scale>
 <!-- Here 1.0 implies original view size;
as pivot is set 0, view will be scaled taking its origin as center-->

More about Animation is here.

Happy coding:-)

1 comment: