Animation Basics

From ModMyGPhone Wiki

Two mechanisms can be used to do animations, Tweened and Frame-by-frame animation. Tweened animation is used to perform transformations like rotation, translation etc. Frame-by-frame animation is similar to GIF animation where several images are played in series. More about it can be read here.

Animations can be applied to either a single view or the whole layout. View animations can be set to repeat while Layout animations are run only once. Animations can be programmed in Java or loaded from XML files(preferred).

Contents 1 View Animation 1.1 Doing in Java 1.2 Doing in XML 2 Layout Animation 2.1 Doing in Java 2.2 Doing in XML 3 Download Source

View Animation

Following code does simple translation, rotation and scaling on an ImageView.

Doing in Java

 AnimationSet set = new AnimationSet(true);
 set.setInterpolator(new AccelerateInterpolator());

• When two or more transformations are to be done simultaneously, they are added to AnimationSet and that set is played.

• An Interpolator defines rate of change of animation. The various interpolators available are,

1. Accelerate Decelerate Interpolator - Rate of change starts and ends slowly but accelerates through the middle.

2. Accelerate Interpolator - Rate of change starts out slowly and and then accelerates.

3. Cycle Interpolator - Repeats the animation for a specified number of cycles.

4. Decelerate Interpolator - Rate of change starts out quickly and and then decelerates.

5. Linear Interpolator - Rate of change is constant.

The default interpolator is Linear Interpolator. In this example I have used Accelerate Interpolator.

TranslateAnimation trans = new TranslateAnimation(
    	      Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
    	      Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f
    	  );
    	  
 trans.setDuration(5000);
 trans.setFillAfter(true);
    	      	  
 set.addAnimation(trans);

• TranslateAnimation controls movement of the View. The parameters are explained in detail here.

• If setFillAfter() is true, the transformation that this animation performed will persist when it is finished. The default values is false.

Definitions for Scale and Rotation animations are similar.

Doing in XML

Here we define and load the same animation sequence from XML. The XML files have to be put into /res/anim folder.

<set xmlns:android="http://schemas.android.com/apk/res/android">


    <translate android:fromYDelta="-1"
               android:toYDelta="0"
               android:duration="5000"
               android:fillAfter="true"/>
    
    
    <rotate android:fromDegrees="0"
                android:toDegrees="360" 
                android:fillAfter="true" 
                android:duration="5000"/>
    
    <scale android:fromXScale="0"
                android:toXScale="1"
                android:fromYScale="0"
                android:toYScale="1"
                android:duration="5000" />
    
</set>

• The tags is pretty self-explanatory and similar to the Java code.

Layout Animation

This code has been adapted from Wave Scale found in API Demos. It shows images in a grid and gives a wave-like effect while loading the items.

Doing in Java

As you might know by now, we'll not use any XML files in anim folder, instead, all the coding will be in Java.

void doAnim()
{
	AnimationSet set = new AnimationSet(true);
    	set.setInterpolator(new AccelerateInterpolator());


    	AlphaAnimation al = new AlphaAnimation(0.0f, 1.0f);
    	al.setDuration(200);
    	
    	set.addAnimation(al);
    	
		
    	ScaleAnimation scale = new ScaleAnimation(
 		       0.5f, 1.5f, 0.5f, 1.5f, 
 		       ScaleAnimation.RELATIVE_TO_SELF, 0.5f, 
 		       ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
 		       scale.setDuration(200);
 		       
 	set.addAnimation(scale);
 		
 		
 	ScaleAnimation scale2 = new ScaleAnimation(
  		       1.5f, 1.0f, 1.5f, 1.0f, 
  		       ScaleAnimation.RELATIVE_TO_SELF, 0.5f, 
  		       ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
  		       
 	scale2.setDuration(200);
  	scale2.setStartOffset(200);
  		
  	set.addAnimation(scale2);

• All the animation is contructed in doAnim() method.

• As in View animation, we use AnimationSet to combine two or more simultaneous transformations.

• AlphaAnimation is used to produce transparency effects. Its parameters are from and to alpha values. These float values have a range of 0.0 to 1.0 where 0.0 is complete transparency and 1.0 is complete opacity.

GridLayoutAnimationController controller = new GridLayoutAnimationController(set, 0, 0.75f);

grid.setLayoutAnimation(controller);

• Quite obvious from its name, GridLayoutAnimationController controls the animation of its items. The parameters passed are, Animation to be applied to the items, columnDelay and rowDelay.

Doing in XML

A layout animation XML file is defined which contains info on how to display the animation.

<gridLayoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
        android:rowDelay="75%"
        android:columnDelay="0%"
        android:animation="@anim/wave_scale" />

• rowDelay is the waiting time before beginning to animate each row.

• The actual transformation code is written in a seperate file which is similar to the XML file of View animation,

<GridView  android:id="@+id/grid"
               android:layoutAnimation="@anim/layout_wave_scale"

               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:verticalSpacing="10dp" 
/>

• The layout animation file declared earlier is assigned to GridView using layoutAnimation attribute.

Download Source

But you'll need to create an account to do this. For gods sake.

Source