I remember when I was a child, we have made drawings on papers which acted as animation. We draw
numerous slides one by one and arrange them and flip them speedily. So that we
realize that is going smoothly like animation. In cartoons also, this technique
is used. We can see this in a flip book.
In this concept, we will make some slides called frames and give them
individually duration for how long it will appear on the screen and that's it.
So, this tutorial will help you to learn how frame by frame animation works.
It's very easy.
Step 1
Find out images which you want for animation. They should be in sequence so that
we can realize it as flipping continuously. File type of images like GIF, PNG
etc. After finding, copy them and place them by copy and paste in
"Your project" -> res -> drawable-mdpi -> paste images
Drawable has three categories
- hdpi-> high dots per inch
- ldpi->large dots per inch
- mdpi->medium dots per inch
Step 2
There are two methods to perform this animation. 1) By creating "BitmapDrawable"
objects, 2) By creating "animation" xml file. We will see both method one by
one.
- Do with "BitmapDrawable"
Syntax:
BitmapDrawable object=(BitmapDrawable) getResources().getDrawable(R.drawable.<image_name>);
Example
Suppose I have image named "sample.png" in "res.drawable" directory, then
BitmapDrawable frame1=(BitmapDrawable)getResources().getDrawable(R.drawable.sample);
AnimationDrawable animation = new AnimationDrawable();
Now, we can add frames which we have created above as like you want.
Syntax:
AnimationDrawable.addFrame(BitmapDrawable,duration);
Example
animation.addFrame(frame1,1000);
In this animation, while you start this animation, it will stop after last
added frame. If you like to continue this animation, following method must
be implemented.
animation.setOneShot(false);
Now, bind "ImageView" object of layout
ImageView img=(ImageView)findViewById(R.id.imageView1);
img.setBackgroundDrawable(animation);
animation.start();
animation.stop();
Description:
-
Duration is in milliseconds.
-
setBackgroundDrawable(animation) method will set background with animation
and give control over animation.
-
start() method will start your animation and stop() will stop this
animation.
- Do with "animatin.xml" file in
animation directory
First, right click "Your Project" -> new -> Android Xml File ->
Now, write down following code in that file by removing existing codes.
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android=http://schemas.android.com/apk/res/android
android:oneshot="false">
<item android:drawable="@drawable/sample1" android:duration="50"/>
<item android:drawable="@drawable/sample2" android:duration="50"/>
<item android:drawable="@drawable/sample3" android:duration="50"/>
</animation-list>
In above code, I have added 3 frames with "android:drawable" attribute and
duration in milliseconds.
Now, bind "ImageView" object with layout and implement following methods.
ImageView img=(ImageView)findViewById(R.id.imageView1);
img.setImageBitmap(null);
img.setBackgroundResource(R.anim.animation);
Next, create object of "AnimatinDrawable" and give background to "AnimationDrawable"
so that it can handle it.
AnimationDrawable animation =
(AnimationDrawable) img.getBackground();
animation.start();
animation.stop();
Using "BitmapDrawable"
Main.java
package com.animationapp;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationAppActvity extends Activity
{
/**
Called when the activity is first created. */
ImageView img;
Button btnStart,btnStop;
AnimationDrawable animation;
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
int duration
= 150;
img =
(ImageView)findViewById(R.id.imageView1);
BitmapDrawable
frame1 =
(BitmapDrawable)getResources().getDrawable(R.drawable.d1);
BitmapDrawable
frame2 =
(BitmapDrawable)getResources().getDrawable(R.drawable.d2);
BitmapDrawable
frame3 =
(BitmapDrawable)getResources().getDrawable(R.drawable.d3);
animation = new AnimationDrawable();
animation.addFrame(frame1,
duration);
animation.addFrame(frame2,
duration);
animation.addFrame(frame3,
duration);
animation.setOneShot(false);
img.setBackgroundDrawable(animation);
btnStart =
(Button)findViewById(R.id.btnStart);
btnStop =
(Button)findViewById(R.id.btnStop);
btnStart.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View
v) {
// TODO Auto-generated
method stub
animation.start();
}
});
btnStop.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View
v) {
// TODO Auto-generated
method stub
animation.stop();
}
});
}
}
Layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<ImageView
android:layout_height="wrap_content"
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:minHeight="191px" android:minWidth="285px">
</ImageView>
<Button
android:text="Start"
android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<Button
android:text="Stop"
android:id="@+id/btnStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
Using "animation.xml" file
package com.AnimApp;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class AnimAppActivity extends Activity
{
/**
Called when the activity is first created. */
Button btnStart,btnStop;
ImageView img;
AnimationDrawable animation;
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
btnStart=(Button)findViewById(R.id.button1);
btnStop=(Button)findViewById(R.id.button2);
img=(ImageView)findViewById(R.id.imageView1);
img.setBackgroundResource(R.anim.animation);
animation=(AnimationDrawable)img.getBackground();
btnStart.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View
v) {
// TODO Auto-generated
method stub
animation.start();
}
});
btnStop.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View
v) {
// TODO Auto-generated
method stub
animation.stop();
}
});
}
}
animation.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/d1" android:duration="50"/>
<item android:drawable="@drawable/d2" android:duration="50"/>
<item android:drawable="@drawable/d3" android:duration="50"/>
</animation-list>
Note:
Layout is same in both methods.
Summary
Frame by Frame animation is useful while you want it frame by frame with some
interval.