android开发步步为营之13：frame animation实现自动播放和手动播放

游戏开发过程中，动画肯定是需要的，Android动画Animation有两种，一种叫Tween Animation展现渐变效果，比如从大到小，从暗到明，旋转，从一个位置移动到另外一个位置，第二种叫Frame Animation就是电影一帧帧播放的效果，今天我们来学习第二种电影放映效果。第一种下次再介绍，先学习理论。
      public class
AnimationDrawable

extends DrawableContainer
implements Animatable Runnable
java.lang.Object
  
android.graphics.drawable.Drawable
 
  
android.graphics.drawable.DrawableContainer
 
 
  
android.graphics.drawable.AnimationDrawable
Class Overview

An object used to create frame-by-frame animations, defined by a series of Drawable objects, which can be used as a View object's background.

The simplest way to create a frame-by-frame animation is to define the animation in an XML file, placed in the res/drawable/ folder, and set it as the background to a View object. Then, call start() to run the animation.

An AnimationDrawable defined in XML consists of a single <animation-list> element, and a series of nested <item> tags. Each item defines a frame of the animation. See the example below.

spin_animation.xml file in res/drawable/ folder:

<!-- Animation frames are wheel0.png -- wheel5.png files inside the
 res/drawable/ folder -->
 <animation-list android:id="selected" android:oneshot="false">
    <item android:drawable="@drawable/wheel0" android:duration="50" />
    <item android:drawable="@drawable/wheel1" android:duration="50" />
    <item android:drawable="@drawable/wheel2" android:duration="50" />
    <item android:drawable="@drawable/wheel3" android:duration="50" />
    <item android:drawable="@drawable/wheel4" android:duration="50" />
    <item android:drawable="@drawable/wheel5" android:duration="50" />
 </animation-list>

Here is the code to load and play this animation.

 // Load the ImageView that will host the animation and
 // set its background to our AnimationDrawable XML resource.
 ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
 img.setBackgroundResource(R.drawable.spin_animation);

 // Get the background, which has been compiled to an AnimationDrawable object.
 AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

 // Start the animation (looped playback by default).
 frameAnimation.start();

          好，开始我们的实验，这里实验我最近开发完成的刷卡支付的动画功能。这个动画展现的是从插入刷卡器到刷卡支付。连续的动画图片我就不给出来了。
 
第一步、res\anim文件夹创建动画xml文件howtousepos.xml
说明：  android:oneshot="false"表示允许动画循环，true表示不允许循环，android:duration 表示这一帧的持续时间，单位毫秒
<?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/cha_1"
        android:duration="400"/>
    <item
        android:drawable="@drawable/cha_2"
        android:duration="100"/>
    <item
        android:drawable="@drawable/cha_3"
        android:duration="200"/>
    <item
        android:drawable="@drawable/cha_4"
        android:duration="1000"/>
    <item
        android:drawable="@drawable/shua_1"
        android:duration="1000"/>
    <item
        android:drawable="@drawable/shua_2"
        android:duration="100"/>
    <item
        android:drawable="@drawable/shua_3"
        android:duration="100"/>
    <item
        android:drawable="@drawable/shua_4"
        android:duration="100"/>
    <item
        android:drawable="@drawable/shua_5"
        android:duration="100"/>
    <item
        android:drawable="@drawable/shua_6"
        android:duration="100"/>
    <item
        android:drawable="@drawable/shua_7"
        android:duration="300"/>
</animation-list>
 
第二步、设计页面res\layout\animationtest.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 手机POS支付 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    >
 
    <ImageView
        android:id="@+id/imgAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
 
        />
    <Button
        android:id="@+id/btnAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/imgAnimation"
        android:text="停止动画" />
 
</RelativeLayout>
 
第三步、设计Activity  AnimationActivity.java
/**
 *
 */
package com.figo.helloworld;
 
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.ViewTreeObserver.OnPreDrawListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
 
/**
 * @author zhuzhifei 版权所有
 *
 */
public class AnimationActivity extends Activity {
         private ImageView imgAnimation;
         AnimationDrawable animation;
         Button btnAnimation;
         private Animation myAnimation_Alpha;
 
         private Animation myAnimation_Scale;
 
         private Animation myAnimation_Translate;
 
         private Animation myAnimation_Rotate;
 
         @Override
         protected void onCreate(Bundle savedInstanceState) {
                   // TODO Auto-generated method stub
                   super.onCreate(savedInstanceState);
                   setContentView(R.layout.animationtest);
                   imgAnimation = (ImageView) findViewById(R.id.imgAnimation);
                   // 设置图片资源
                   imgAnimation.setImageResource(R.anim.howtousepos);
                   animation = (AnimationDrawable) imgAnimation.getDrawable();
                   // 也可以通过设置背景的方法，推荐使用setImageResource，因为使用setBackgroundResource
                   // 发现第二次的动画速度会加快
        // imgAnimation.setBackgroundResource(R.anim.howtousepos);
        // animation = (AnimationDrawable) imgAnimation.getBackground();
                   // 方法一、通过addOnPreDrawListener实现自动执行动画
                   // imgAnimation.getViewTreeObserver().addOnPreDrawListener(preDrawListener);
                   // 方法二、通过Runnable实现自动执行动画
                    imgAnimation.post(new Runnable() {
                    @Override
                    public void run() {
                    animation.start();
                     }
                    });
 
                   // 方法三、通过按钮点击事件实现手动执行动画
                   btnAnimation = (Button) findViewById(R.id.btnAnimation);
                   btnAnimation.setOnClickListener(new OnClickListener() {
 
                            public void onClick(View v) {
                                     if (animation != null && animation.isRunning() == true) {
                                               animation.stop();
                                               btnAnimation.setText("开始动画");
 
                                     } else {
                                               animation.start();
                                               btnAnimation.setText("停止动画");
                                     }
                            }
                   });
         }
 
         OnPreDrawListener preDrawListener = new OnPreDrawListener() {
                   @Override
                   public boolean onPreDraw() {
                            //animation = (AnimationDrawable) imgAnimation.getDrawable();
                            animation.start();
                            return true; // 必须要有这个true返回
                   }
         };
 
 
}
 
第四步、运行效果