8.4.1 Android动画合集之帧动画

本节引言：

从这一节开始，正式聊聊 Android 里的动画。原因其实很直接：一个 APP 只要把动画用对了，整体观感往往就会立刻灵动不少。哪怕只是最基础的 Activity 开关切换，也能明显提升体验；更不用说自定义控件了，动画几乎是绕不开的一环。Android 的动画大体可以分成三类：逐帧动画(Frame)、补间动画(Tween)，以及 Android 3.0 之后引入的属性动画(Property)。而这一节要展开的，就是第一类动画——逐帧动画的基础用法。

1.帧动画概念以及用法

帧动画非常容易理解，其实就是简单的由N张静态图片收集起来，然后我们通过控制依次显示 这些图片，因为人眼"视觉残留"的原因，会让我们造成动画的"错觉"，跟放电影的原理一样！

而Android中实现帧动画，一般我们会用到前面讲解到的一个Drawable：AnimationDrawable 先编写好Drawable，然后代码中调用start()以及stop()开始或停止播放动画~

当然我们也可以在Ja va代码中创建逐帧动画，创建AnimationDrawable对象，然后调用 addFrame(Drawable frame,int duration)向动画中添加帧，接着调用start()和stop()而已~

下面我们来写两个例子体会下帧动画的效果以及熟悉下用法

2.使用示例：

示例一：最简单的例子：

运行效果图：

代码实现：

首先编写我们的动画文件，非常简单，先在res下创建一个anim目录，接着开始撸我们的 动画文件：miao_gif.xml： 这里的android:oneshot是设置动画是否只是播放一次，true只播放一次，false循环播放！

    
    
    
    
    ...

动画文件有了，接着到我们的布局文件：activity_main.xml：

最后是我们的MainActivity.ja va，这里在这里控制动画的开始以及暂停：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btn_start;
    private Button btn_stop;
    private ImageView img_show;
    private AnimationDrawable anim;
@Override
    protected void onCreate(Bundle sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
        anim = (AnimationDrawable) img_show.getBackground();
    }
private void bindViews() {
        btn_start = (Button) findViewById(R.id.btn_start);
        btn_stop = (Button) findViewById(R.id.btn_stop);
        img_show = (ImageView) findViewById(R.id.img_show);
        btn_start.setOnClickListener(this);
        btn_stop.setOnClickListener(this);
    }
@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_start:
                anim.start();
                break;
            case R.id.btn_stop:
                anim.stop();
                break;
        }
    }
}

好的，非常的简单哈~

示例二：在指定地方播放帧动画

运行效果图：

代码实现：

依旧是先上我们的动画文件:anim_zhuan.xml：

    
    
    
     
    ...
 

接着我们来写一个自定义的ImageView：FrameView.ja va，这里通过反射获得当前播放的帧， 然后是否为最后一帧，是的话隐藏控件！

/**
 * Created by Jay on 2015/11/15 0015.
 */
public class FrameView extends ImageView {
private AnimationDrawable anim;
public FrameView(Context context) {
        super(context);
    }
public FrameView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
public FrameView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
public void setAnim(AnimationDrawable anim){
        this.anim = anim;
    }
public void setLocation(int top,int left){
        this.setFrame(left,top,left + 200,top + 200);
    }
@Override
    protected void onDraw(Canvas canvas) {
        try{
            //反射调用AnimationDrawable里的mCurFrame值
            Field field = AnimationDrawable.class
                    .getDeclaredField("mCurFrame");
            field.setAccessible(true);
            int curFrame = field.getInt(anim);// 获取anim动画的当前帧
            if (curFrame == anim.getNumberOfFrames() - 1)// 如果已经到了最后一帧
            {
                //让该View隐藏
                setVisibility(View.INVISIBLE);
            }
        }catch (Exception e){e.printStackTrace();}
        super.onDraw(canvas);
    }
}

最后是我们的MainActivity.ja va，创建一个FrameLayout，添加View，对触摸事件中按下的 事件做处理，显示控件以及开启动画~

public class MainActivity extends AppCompatActivity {
private FrameView fView;
    private AnimationDrawable anim = null;
@Override
    protected void onCreate(Bundle sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        FrameLayout fly = new FrameLayout(this);
        setContentView(fly);
        fView = new FrameView(this);
        fView.setBackgroundResource(R.anim.anim_zhuan);
        fView.setVisibility(View.INVISIBLE);
        anim = (AnimationDrawable) fView.getBackground();
        fView.setAnim(anim);
        fly.addView(fView);
        fly.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                //设置按下时才产生动画效果
                if(event.getAction() == MotionEvent.ACTION_DOWN){
                    anim.stop();
                    float x = event.getX();
                    float y = event.getY();
                    fView.setLocation((int) y - 40,(int)x-20);  //View显示的位置
                    fView.setVisibility(View.VISIBLE);
                    anim.start();    //开启动画
                }
                return false;
            }
        });
    }
}

好的，同样很简单哈~

3.本节示例代码和Gif帧提取工具下载

AnimationDemo1.zip

AnimationDemo2.zip

Gif帧提取工具

本节小结：

好的，本节给大家介绍了一下Android三种动画中最简单的帧动画，实际开发用的并不多 不过学多点东西，以后也多个思路嘛~好的，本节就到这里，谢谢~