We know that animation is the technique for making a movie using a series of drawings, computer graphics, or photographs of objects (such as puppets or models) that are slightly different from one another and that, when viewed quickly one after another, creates the appearance of movement.

Today we make a simple animation as in the following:



In the preceding picture we are moving a series of photos frame-by-frame that create an illusion of moving an object.

Now we move toward the code section of this project.

In the design section we use an Imageview. In this ImageView we will show our image. We also use two buttons. One to start the animation and the other to stop the animation.

The following is the XML code of our project:

  1. <LinearLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. android:background="#E6E6E6">
  7. <ImageView android:layout_height="wrap_content"
  8. android:layout_width="wrap_content" android:id="@+id/imageAnimation"
  9. android:adjustViewBounds="true" />
  10. <Button
  11. android:id="@+id/btnStart"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:text="Start Animation" />
  15. <Button
  16. android:id="@+id/btnStop"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:text="Stop Animation" />
  20. </LinearLayout>
After using the preceding XML code the design of the project is:

Design of projec

In drawable-mdpi folder we put a number of images. Each image contains a specific position of the ball with respect to the other image. We provide a serial number for each image according to their position in the animation.

image

We use an animation.xml file. This file contains an animation-list. In this animation list we provide the path of each image in the form of a list item. We also provide the time duration for each image so that specific time image will be visible and then the next image will be visible. We can decrease the value of the time duration to increase the animation speed or increase the value of the time duration to decrease the animation speed.

The following is the animation.xml:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <animation-list
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:oneshot="false">
  5. <item android:drawable="@drawable/frame0" android:duration="50" />
  6. <item android:drawable="@drawable/frame1" android:duration="50" />
  7. <item android:drawable="@drawable/frame2" android:duration="50" />
  8. <item android:drawable="@drawable/frame3" android:duration="50" />
  9. <item android:drawable="@drawable/frame4" android:duration="50" />
  10. <item android:drawable="@drawable/frame5" android:duration="50" />
  11. <item android:drawable="@drawable/frame6" android:duration="50" />
  12. <item android:drawable="@drawable/frame7" android:duration="50" />
  13. <item android:drawable="@drawable/frame8" android:duration="50" />
  14. <item android:drawable="@drawable/frame9" android:duration="50" />
  15. <item android:drawable="@drawable/frame10" android:duration="50" />
  16. <item android:drawable="@drawable/frame11" android:duration="50" />
  17. <item android:drawable="@drawable/frame12" android:duration="50" />
  18. <item android:drawable="@drawable/frame13" android:duration="50" />
  19. <item android:drawable="@drawable/frame14" android:duration="50" />
  20. <item android:drawable="@drawable/frame15" android:duration="50" />
  21. <item android:drawable="@drawable/frame16" android:duration="50" />
  22. <item android:drawable="@drawable/frame17" android:duration="50" />
  23. <item android:drawable="@drawable/frame18" android:duration="50" />
  24. <item android:drawable="@drawable/frame19" android:duration="50" />
  25. <item android:drawable="@drawable/frame20" android:duration="50" />
  26. <item android:drawable="@drawable/frame21" android:duration="50" />
  27. <item android:drawable="@drawable/frame22" android:duration="50" />
  28. <item android:drawable="@drawable/frame23" android:duration="50" />
  29. <item android:drawable="@drawable/frame24" android:duration="50" />
  30. <item android:drawable="@drawable/frame25" android:duration="50" />
  31. <item android:drawable="@drawable/frame26" android:duration="50" />
  32. <item android:drawable="@drawable/frame27" android:duration="50" />
  33. <item android:drawable="@drawable/frame28" android:duration="50" />
  34. <item android:drawable="@drawable/frame29" android:duration="50" />
  35. <item android:drawable="@drawable/frame30" android:duration="50" />
  36. <item android:drawable="@drawable/frame31" android:duration="50" />
  37. <item android:drawable="@drawable/frame32" android:duration="50" />
  38. <item android:drawable="@drawable/frame33" android:duration="50" />
  39. <item android:drawable="@drawable/frame34" android:duration="50" />
  40. <item android:drawable="@drawable/frame35" android:duration="50" />
  41. </animation-list>
Now I will explain the source code (animation.java) for this project.

The following is the source code of the project:
  1. package com.appsolut.example.animation;
  3. import android.app.Activity;
  4. import android.graphics.drawable.AnimationDrawable;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. import android.widget.Button;
  8. import android.widget.ImageView;
  10. public class Animation extends Activity {
  12. /**
  13. * Reference to the ImageView which will display the animation.
  14. */
  15. ImageView animation;
  16. Button Start;
  17. Button Stop;
  19. @Override
  20. public void onCreate(Bundle savedInstanceState) {
  21. super.onCreate(savedInstanceState);
  22. setContentView(R.layout.main);
  24. Start = (Button) findViewById(R.id.btnStart);
  25. Stop = (Button) findViewById(R.id.btnStop);
  27. animation = (ImageView) findViewById(R.id.imageAnimation);
  29. animation.setBackgroundResource(R.drawable.animation); // the frame-by-frame animation defined as a xml file within the drawable folder
  30. final AnimationDrawable frameAnimation = (AnimationDrawable) animation.getBackground();
  31. /*
  32. * NOTE: It's not possible to start the animation during the onCreate.
  33. *
  34. */
  36. Start.setOnClickListener(new View.OnClickListener() {
  38. @Override
  39. public void onClick(View arg0) {
  40. // TODO Auto-generated method stub
  41. frameAnimation.start(); //Start the Animation
  42. }
  43. });
  46. Stop.setOnClickListener(new View.OnClickListener() {
  48. @Override
  49. public void onClick(View arg0) {
  50. // TODO Auto-generated method stub
  51. frameAnimation.stop(); // Stop the Animation
  52. }
  53. });
  54. }
  56. }
Explanation

Today we learned how make an animation in some simple steps.