Frame by frame animation
| activity_frameanimation.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="53dp"
android:src="@anim/animation" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_toLeftOf="@+id/button2"
android:text="Start" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1"
android:layout_alignBottom="@+id/button1"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:text="Stop" />
</RelativeLayout>
|
| 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/img1" android:duration="500"/>
<item android:drawable="@drawable/img2" android:duration="500"/>
<item android:drawable="@drawable/img3" android:duration="500"/>
</animation-list>
|
package com.example.frameanimationkjs;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
public class frameanimation extends Activity{
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_frameanimation);
Button b1 = (Button)findViewById(R.id.button1);
Button b2 = (Button)findViewById(R.id.button2);
ImageView iv = (ImageView)findViewById(R.id.imageView1);
final AnimationDrawable ad = (AnimationDrawable)iv.getDrawable();
b1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
ad.setOneShot(false);
ad.start();
}
});
b2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
ad.stop();
}
});
}
}
|
   |
 |
 |
Book Referemces.
Android Wireless Application Development, 2/E
Shane Conder
Lauren Darcey
Working with Frame-by-Frame Animation
You can think of frame-by-frame animation as a digital flipbook in which a series of similar images display on the screen in a sequence, each subtly different from the last. When you display these images quickly, they give the illusion of movement. This technique is called frame-by-frame animation and is often used on the Web in the form of animated GIF images.
Frame-by-frame animation is best used for complicated graphics transformations that are not easily implemented programmatically.
For example, we can create the illusion of a genie juggling gifts using a sequence of three images, as shown in Figure
In each frame, the genie remains fixed, but the gifts are repositioned slightly. The smoothness of the animation is controlled by providing an adequate number of frames and choosing the appropriate speed on which to swap them.
The following code demonstrates how to load three Bitmap resources (our three genie frames) and create an AnimationDrawable.
We then set the AnimationDrawable as the background resource of an ImageView and start the animation:
ImageView img = (ImageView)findViewById(R.id.ImageView1);
BitmapDrawable frame1 = (BitmapDrawable)getResources().getDrawable(R.drawable.f1);
BitmapDrawable frame2 = (BitmapDrawable)getResources().getDrawable(R.drawable.f2);
BitmapDrawable frame3 = (BitmapDrawable)getResources().getDrawable(R.drawable.f3);
int reasonableDuration = 250;
AnimationDrawable mAnimation = new AnimationDrawable();
mAnimation.addFrame(frame1, reasonableDuration);
mAnimation.addFrame(frame2, reasonableDuration);
mAnimation.addFrame(frame3, reasonableDuration);
img.setBackgroundDrawable(mAnimation);
To name the animation loop continuously,we can call the setOneShot() method:
mAnimation.setOneShot(false);
To begin the animation,we call the start() method:
mAnimation.start();
We can end our animation at any time using the stop() method:
mAnimation.stop();
Although we used an ImageView background in this example, you can use a variety of different View widgets for animations. For example, you can instead use the
ImageSwitcher view and change the displayed Drawable resource using a timer. This sort of operation is best done on a separate thread.The resulting animation might look something like Figure 9.14—you just have to imagine it moving.
No comments:
Post a Comment