Different Animations in Android and How to Use It

Summary:

Animation with the coding is nothing new and you can even do it on your android device too. It varies as per the requirements but using XML to animate object into android is really essential and most favored part among most android game developers.

Description:

If you know about animation, it is the rapid display of static images or objects into a sequence to create chimera of whereabouts. The most frequent method of presenting it is motion picture or video program along with few more where a series of images moves somewhat in haste and provides an awe-inspiring visual experience to the addressees. The use of animation is mostly essential in game development for personal computers or mobile devices.

In my previous days, I was trying to put some animations with android and it is all about what I did by using XML and an animation can in fact be implemented when defining it into the XML. Meanwhile, you are well known about the phrase android, its classes and properties consequently you might have good understanding with the animations and its whereabouts. However, the animation system is a stout framework that allows you to animate just about the whole lot. You can delineate an animation to change any object property over the time no matter it draws to the screen attention or not. A property animation changes a property value over a particular span of time and to animate anything almost you want to specify it as an object property.

So, lets go through the stepwise illustration along with the animations I experienced with. Following are the steps to execute an animation on any UI element. Creating animation is really easy and only requires creating few required files and few lines of code.

 Step-1: Create xml

 First of all we have to create XML files for each animation. These files should be located under anim folder under res directory (res ⇒ anim ⇒ animation.xml). If you don’t have anim folder in your res directory, create a new one.

FADE IN:

fade_in.xml

                                android:fillAfter="true" >

                                 

                                  android:duration="1000"

                                android:fromAlpha="0.0"

                                android:interpolator="@android:anim/accelerate_interpolator"

                                android:toAlpha="1.0" />

FADE OUT:

fade_out.xml

                                 android:fillAfter="true" >

                               

                                android:duration="1000"

                                android:fromAlpha="1.0"

                                android:interpolator="@android:anim/accelerate_interpolator"

                                android:toAlpha="0.0" />

                               

BLINK:

blink.xml

                                 

                                android:toAlpha="1.0"

                                android:interpolator="@android:anim/accelerate_interpolator"

                                 android:duration="600"

                                android:repeatMode="reverse"

                                android:repeatCount="infinite"/>

ZOOM IN:

zoom_in.xml

                                android:fillAfter="true" >

                               

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

                                android:duration="1000"

                                android:fromXScale="1"

                                 android:fromYScale="1"

                                 android:pivotX="50%"

                                 android:pivotY="50%"

                                 android:toXScale="3"

                                 android:toYScale="3" >

                                  

                               

ROTATE:

rotate.xml

                                 

                                    android:toDegrees="360"

                                     android:pivotX="50%"

                                     android:pivotY="50%"

                                     android:duration="600"

                                 android:repeatMode="restart"

                                 android:repeatCount="infinite"

                                 android:interpolator="@android:anim/cycle_interpolator"/>

                               

MOVE:

move.xml

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

    android:interpolator="@android:anim/linear_interpolator"

                                   android:fillAfter="true">

                                  

                                      android:fromXDelta="0%p"

      android:toXDelta="75%p"

                                      android:duration="800" />

SLIDE UP:

slide_up.xml

    android:fillAfter="true" >

                                  

                                  android:duration="500"

                                  android:fromXScale="1.0"

                                  android:fromYScale="1.0"

                                  android:interpolator="@android:anim/linear_interpolator"

                                  android:toXScale="1.0"

                                  android:toYScale="0.0" />

                               

SLIDE DOWN:

slide_down.xml

                                   android:fillAfter="true">

                                   

                                   android:duration="500"

                                  android:fromXScale="1.0"

                                  android:fromYScale="0.0"

                                    android:interpolator="@android:anim/linear_interpolator"

                                    android:toXScale="1.0"

                                   android:toYScale="1.0" />

                               

BOUNCE:

bounce.xml

    android:fillAfter="true"

    android:interpolator="@android:anim/bounce_interpolator">

                                   

                                    android:duration="500"

                                      android:fromXScale="1.0"

                                    android:fromYScale="0.0"

                                   android:toXScale="1.0"

                                   android:toYScale="1.0" />

                               

SEQUENTIAL ANIMATION:

sequential.xml

                                   android:fillAfter="true"

    android:interpolator="@android:anim/linear_interpolator" >

                                   

                                   

   

                                    android:duration="800"

                                   android:fillAfter="true"

                                   android:fromXDelta="0%p"

                                  android:startOffset="300"

                                  android:toXDelta="75%p" />

 

        android:duration="800"

        android:fillAfter="true"

                                        android:fromYDelta="0%p"

        android:startOffset="1100"

                                        android:toYDelta="70%p" />

   

        android:duration="800"

        android:fillAfter="true"

        android:fromXDelta="0%p"

                                        android:startOffset="1900"

                                     android:toXDelta="-75%p" />

 

       android:duration="800"

      android:fillAfter="true"

      android:fromYDelta="0%p"

                                      android:startOffset="2700"

                                     android:toYDelta="-70%p" />

                                   

   

                                      android:duration="1000"

                                      android:fromDegrees="0"

                                       android:interpolator="@android:anim/cycle_interpolator"

       android:pivotX="50%"

                                       android:pivotY="50%"

                                       android:startOffset="3800"

       android:repeatCount="infinite"

       android:repeatMode="restart"

       android:toDegrees="360" />

                               

TOGETHER ANIMATION:

together.xml

    android:fillAfter="true"

    android:interpolator="@android:anim/linear_interpolator" >

                                   

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

        android:duration="4000"

        android:fromXScale="1"

        android:fromYScale="1"

        android:pivotX="50%"

        android:pivotY="50%"

                                        android:toXScale="4"

                                        android:toYScale="4" >

   

                                  

                                  

        android:duration="500"

                                       android:fromDegrees="0"

        android:pivotX="50%"

        android:pivotY="50%"

                                      android:repeatCount="infinite"

                                    android:repeatMode="restart"

                                     android:toDegrees="360" />

                               

Step-2:  Load the Animation

Now we have to create an object of Animation class in our activity. And load the xml animation using AnimationUtils by calling loadAnimation function.

FadeInActivity.java

public class FadeInActivity extends Activity{

     TextView txtMessage;

     // Animation

    Animation animFadein;

     @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_fadein);

         txtMessage = (TextView) findViewById(R.id.txtMessage);

         // load the animation

        animFadein = AnimationUtils.loadAnimation(getApplicationContext(),

                R.anim.fade_in);       

    }

}

Step-3: Set the Animation Listeners (Optional)

Although this part of the program is just an optional one but it needs you to set listener by using AnimationListener. If you are using it into your code, you need to supersede following methods.

onAnimationStart – This will be triggered once the animation started

onAnimationEnd – This will be triggered once the animation is over

onAnimationRepeat – This will be triggered if the animation repeats

public class FadeInActivity extends Activity implements AnimationListener {

// set animation listener

animFadein.setAnimationListener(this);

// animation listeners

                                  @Override

                                  public void onAnimationEnd(Animation animation) {

                                // Take any action after completing the animation

                                  // check for fade in animation

                                 if (animation == animFadein) {

                                   Toast.makeText(getApplicationContext(), "Animation Stopped",

                                                    Toast.LENGTH_SHORT).show();

                                     }

                                    }

                                    @Override

    public void onAnimationRepeat(Animation animation) {

                                   // Animation is repeating

    }

                                   @Override

    public void onAnimationStart(Animation animation) {

                                    // Animation started

                                  }

Step-4:  Start the Animation

Now, it’s the time is of executing something admirable and you can start animation whenever you want by calling startAnimation on any UI element by passing the type of animation likewise the illustration beneath.  

// start the animation

txtMessage.startAnimation(animFadein);

Here is complete code:

FadeInActivity

package com.vit.androidanimations;

                                import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.view.animation.Animation.AnimationListener;

import android.widget.Button;

import android.widget.TextView;

import android.widget.Toast;

                                public class FadeInActivity extends Activity implements AnimationListener {

                                TextView txtMessage;

                                 Button btnStart;

                                // Animation

                                Animation animFadein;

                                 @Override

                                protected void onCreate(Bundle savedInstanceState) {

                                // TODO Auto-generated method stub

                                 super.onCreate(savedInstanceState);

                                 setContentView(R.layout.activity_fadein);

                                txtMessage = (TextView) findViewById(R.id.txtMessage);

                                btnStart = (Button) findViewById(R.id.btnStart);

                                 // load the animation

                                animFadein = AnimationUtils.loadAnimation(getApplicationContext(),

                                 R.anim.fade_in);

                                // set animation listener

                                 animFadein.setAnimationListener(this);

                                // button click event

                                 btnStart.setOnClickListener(new View.OnClickListener() {

                                @Override

                                public void onClick(View v) {

                                                txtMessage.setVisibility(View.VISIBLE);

                

                                                // start the animation

                                                txtMessage.startAnimation(animFadein);

                                 }

                                 });

                                }

                                @Override

                                public void onAnimationEnd(Animation animation) {

                                // Take any action after completing the animation

                                // check for fade in animation

                                if (animation == animFadein) {

                                Toast.makeText(getApplicationContext(), "Animation Stopped",

                                                Toast.LENGTH_SHORT).show();

                                 }

                                 }

                                @Override

                                 public void onAnimationRepeat(Animation animation) {

                                 // TODO Auto-generated method stub

                                 }

                                @Override

                                 public void onAnimationStart(Animation animation) {

                                // TODO Auto-generated method stub

                                }

                                }

So, it was all about placing animation into your android device via coding pattern. Now the time is to perform the same to understand it well. Now go ahead and make it for your own. I hope it will work exceptionally well and you will be really able to do it on to your device. Good Luck……..