Android 逐帧动画与自定义Dialog

一、逐帧动画简介

　　逐帧动画是动画中最好理解的一种动画，就是一堆图片的依次播放，当每张图片的变化比较微小时，多张图片快速播放时由于人眼的视觉差就会感觉图片展示的内容跟动起来了一样。

二、逐帧动画的使用

逐帧动画的使用首先是编写xml的图片列表，为imageview设置xml文件为背景或者是src属性，之后通过imageview得到图片并转化为AnimationDrawable类型，最后调用AnimationDrawable的start方法。

1、图片列表

drawable文件下编写xml文件，装在图片列表

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

    android:oneshot="false">
    <item android:drawable="@mipmap/a" android:duration="200"> item>
    <item android:drawable="@mipmap/b" android:duration="200"> item>
    <item android:drawable="@mipmap/c" android:duration="200"> item>
    <item android:drawable="@mipmap/d" android:duration="200"> item>

animation-list>

2、为ImageView设置图片列表

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginBottom="20dp"
        android:gravity="center">
        <Button
            android:id="@+id/buttonstart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="开启逐帧动画"
          />
        <Button
            android:id="@+id/buttonstop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="停止逐帧动画"
            />
        <Button
            android:id="@+id/buttonprogress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="显示Progress"
            />
    LinearLayout>

<ImageView
    android:id="@+id/iamgview_animation"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scaleType="fitCenter"
    android:src="@drawable/anilist"
 />

LinearLayout>

3、开启动画

逐帧动画部分代码提取

 mImageViewAni.setImageResource(R.drawable.anilist);
 AnimationDrawable    ad= (AnimationDrawable) mImageViewAni.getDrawable();
       ad.start();

注:完整代码见最后

二、自定义Dialog

1、自定义Dialog布局

此处自定义dialog的ImageView的图片是采用上面的逐帧动画的布局中图片列表类似的效果图片。
Progresslayout布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="30dp"
    android:background="@drawable/progressbackground"
    android:gravity="center">
<ImageView
    android:id="@+id/loadingprogressimg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/progressimg"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="加载中……"
        android:textSize="20sp"
        android:layout_margin="10dp"
        />
LinearLayout>

布局效果图

2、继承Dialog

编写ProgressDialog继承Dialog，设置布局，开启动画。

public class ProgressDialogUtils extends Dialog {
    private Context mContext;

    private static ProgressDialogUtils progressDialog;


    public ProgressDialogUtils(Context context) {
        super(context);
    }

    public ProgressDialogUtils(Context context, int theme) {
        super(context, theme);
    }

    protected ProgressDialogUtils(Context context, boolean cancelable, OnCancelListener cancelListener) {
        super(context, cancelable, cancelListener);
    }

    public  static ProgressDialogUtils createDialog(Context context){
    //设置是否全屏，是否昏暗等效果
        progressDialog = new ProgressDialogUtils(context,R.style.CustomProgressDialog);
        //设置布局，开启动画
        progressDialog.setContentView(R.layout.progresslayout);
        progressDialog.getWindow().getAttributes().gravity = Gravity.CENTER;

        return progressDialog;
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (progressDialog == null){
            return;
        }

        ImageView imageView = (ImageView) progressDialog.findViewById(R.id.loadingprogressimg);
        AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
        animationDrawable.start();
    }
}

3、Activity调用（包含上面的助阵动画与自定义Dialog）

Activity：

public class FrameAnimationTest extends BaseActivity implements View.OnClickListener{
    private Button mButtonStartAni;
    private Button mButtonStopAni;
    private Button mButtonShowProgress;
    private ImageView mImageViewAni;
   private AnimationDrawable ad;
    private ProgressDialogUtils progressDialogUtils;
    private boolean isShowProgress;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.animationlayout);
        mButtonStartAni= (Button) findViewById(R.id.buttonstart);
        mImageViewAni= (ImageView) findViewById(R.id.iamgview_animation);
        mButtonStopAni= (Button) findViewById(R.id.buttonstop);
        mButtonShowProgress= (Button) findViewById(R.id.buttonprogress);
        mImageViewAni.setImageResource(R.drawable.anilist);
       ad= (AnimationDrawable) mImageViewAni.getDrawable();
        progressDialogUtils=ProgressDialogUtils.createDialog(this);

        mButtonStartAni.setOnClickListener(this);
        mButtonStopAni.setOnClickListener(this);
        mButtonShowProgress.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.buttonstart: ad.start();break;
            case R.id.buttonstop: ad.stop();break;
            case R.id.buttonprogress:
                if(!isShowProgress){

                    progressDialogUtils.show();
                    isShowProgress=true;
                    mButtonShowProgress.setText("取消Progress");
                } else {
                    progressDialogUtils.dismiss();
                    mButtonShowProgress.setText("显示Progress");

                    isShowProgress=false;

                }

                break;

        }
    }
}

补充代码：
Style

Colors

<resources>
    <color name="colorPrimary">#3F51B5color>
    <color name="colorPrimaryDark">#303F9Fcolor>
    <color name="colorAccent">#FF4081color>
    <color name="transparentbg">#55000000color>
    <color name="fulltranparent">#00ffffffcolor>
resources>

progressbackground.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp">corners>
    <solid android:color="@color/transparentbg">solid>
shape>

结：例子比较简单，但是两者的结合值得学习一下。