Android 逐帧(Frame)动画

逐帧(Frame)动画

         在安卓中有属性（Property ）动画,补间（Tween）动画和逐帧（Frame）动画,其中的逐帧动画是较容易理解的，就像我们看电影一样，利用了人眼的视觉暂留，逐帧动画实际上是一张张的图片依次放映。

       我们将动画中需要放映的一张图片称作一帧，定义逐帧动画很简单，动画一般都在xml文件里面定义，这个也不例外，只需要将每一帧包含在一个<item>元素里面，然后将一个动画内的所有帧用<animation-list>元素囊括起来，就完成了定义。大致的格式如下：

<?xml version="1.0" encoding="utf-8" ?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true" >
    <item android:drawable="@mipmap/explosion_1" android:duration="80" />
    <item android:drawable="@mipmap/explosion_2" android:duration="80" />
    <item android:drawable="@mipmap/explosion_3" android:duration="80" />
    <item android:drawable="@mipmap/explosion_4" android:duration="80" />
    <item android:drawable="@mipmap/explosion_5" android:duration="80" />
    <item android:drawable="@mipmap/explosion_6" android:duration="80" />
    <item android:drawable="@mipmap/explosion_7" android:duration="80" />
    <item android:drawable="@mipmap/explosion_8" android:duration="80" />
</animation-list>

      可以看得很清楚，这个帧动画中包含着8张图片，每张图片的放映时间为80ms，在<animation-list>中有一个onshot属性，如果设置为true则只放映一遍，如果是false则该动画会循环播放。

       下面结合一个小实例来看看如何使用定义了的动画。动画也就是上面的8张图片，是一个爆炸的动画，手指在屏幕上点击后，在点击处播放爆炸的动画。

public class MainActivity extends Activity {


    /**
     * 动画播放的位置
     */
    private float ex;
    private float ey;

    /**
     * 自定义的View
     */
    private MyView myView;

    /**
     * animationDrawable对象
     */
    private AnimationDrawable anim;

    /**
     * 播放声音的类
     */
    private MediaPlayer bomb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        /**
         * 这个demo没有用xml定义布局
         * Framelayout中的控件可以通过setFrame来控制自己的位置
         */
        FrameLayout frameLayout = new FrameLayout(this);
        setContentView(frameLayout);

        frameLayout.setBackgroundColor(Color.BLACK);

        /**
         * 预备声音文件
         */
        bomb = MediaPlayer.create(this, R.raw.sound);

        myView = new MyView(this);
        myView.setVisibility(View.GONE);

        /**
         * 从这里开始使用了前面定义的动画
         * 利用setBackgroundResource函数将动画设为View的背景
         * 设置之后只会将该动画的第一帧作为背景
         * 不会直接播放动画
         *
         * 如果是在xml布局文件中直接设置，就会直接触发动画
         */
        myView.setBackgroundResource(R.drawable.explosion);


        /**
         * 将动画的实例取出
         * 在需要开始播放动画的地方调用anim.start()即可
         */
        anim = (AnimationDrawable)myView.getBackground();

        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(66,66);

        frameLayout.addView(myView,layoutParams);

        /**
         * 给整个layout添加一个触摸监听器
         * 在手指点击后，捕捉到x,y坐标，传给view
         * 再定位view在整个屏幕上的位置
         * 调用anim.start()和bomb.start()播放动画和声音
         */
        frameLayout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View source, MotionEvent event) {

                if (event.getAction() == MotionEvent.ACTION_DOWN) {

                    anim.stop();
                    ex = event.getX();
                    ey = event.getY();
                    myView.setLocation((int) ey - 40, (int) ex - 20);
                    myView.setVisibility(View.VISIBLE);

                    anim.start();
                    bomb.start();
                }
                return false;
            }
        });
    }

    class MyView extends ImageView {
        public MyView(Context context) {
            super(context);
        }

        public void setLocation(int top, int left) {

            this.setFrame(left,top,left + 66, top + 66);
        }
        @Override
        protected void onDraw(Canvas canvas) {
            try {

                /**
                 * 下面几行代码是在view不停的绘制时
                 * 获取到正在绘制的是第几帧
                 * 如果是最后一帧，则绘制完成后将view隐藏
                 */
                Field field = AnimationDrawable.class.getDeclaredField("mCurFrame");

                field.setAccessible(true);
                int curFrame = field.getInt(anim);
                if(curFrame == anim.getNumberOfFrames() - 1) {
                    setVisibility(GONE);
                }
            }
            catch(Exception e) {
                e.printStackTrace();
            }
            super.onDraw(canvas);
        }
    }
}

     最后上传一张效果图，基本上就是这个样子的。