实习入职第八天：Android带动画效果的弹窗

在网络加载数据的时候通常需要很多时间，这个时候程序里面经常需要写一个提示正在加载数据的弹窗，这篇文章用两种方式实现带动画效果的Dialog:帧动画实现和GIF动态图实现，它们都能达到动画的效果

第一种、帧动画实现
自定义一个Dialog，先看一下布局文件dialog_animation.xml

?

1 2 3 4 5 6 7

<linearlayout android:gravity= "center" android:layout_height= "wrap_content" android:layout_width= "wrap_content" android:orientation= "vertical" android:paddingbottom= "20dp" android:paddingleft= "80dp" android:paddingright= "80dp" android:paddingtop= "20dp" xmlns:android= "http://schemas.android.com/apk/res/android" >        <imageview android:id= "@+id/dialog_animation_img" android:layout_height= "wrap_content" android:layout_width= "wrap_content" >        <textview android:gravity= "center" android:id= "@+id/dialog_animation_txt" android:layout_height= "wrap_content" android:layout_margintop= "10dp" android:layout_width= "wrap_content" android:text= "正在加载数据。。。" android:textcolor= "@android:color/black" android:textsize= "16sp" >   </textview></imageview></linearlayout>

ImageView用来显示动画，TextView用于提示用户我们正在加载数据

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

public static Dialog createAnimationDailog( final Context context) {          final Dialog dialog = new Dialog(context, R.style.dialog);          dialog.setContentView(R.layout.dialog_animation);          ImageView animationView = (ImageView) dialog                  .findViewById(R.id.dialog_animation_img);          animationView.setBackgroundResource(R.drawable.animation_dialog);          AnimationDrawable animationDrawable = (AnimationDrawable) animationView                  .getBackground();          animationDrawable.start();          final TextView textView = (TextView) dialog                  .findViewById(R.id.dialog_animation_txt);          Animation animation = AnimationUtils.loadAnimation(context,                  R.anim.animation_dialog_txt);          // animation的循环播放模式不起作用，只能手动的在动画播放完之后再播放一次          animation.setAnimationListener( new AnimationListener() {                @Override              public void onAnimationEnd(Animation arg0) {                  Animation anim = AnimationUtils.loadAnimation(context,                          R.anim.animation_dialog_txt);                  textView.startAnimation(anim);                  anim.setAnimationListener( this );              }                @Override              public void onAnimationRepeat(Animation arg0) {                  // TODO Auto-generated method stub              }                @Override              public void onAnimationStart(Animation arg0) {                  // TODO Auto-generated method stub                }            });          // 绑定动画          textView.startAnimation(animation);          return dialog;      }

ImageView中的帧动画文件，很简单的，就三张图片顺序播放。新建res/drawable/animation_dialog.xml

<pre name="code" class="html" style="color: rgb(51, 51, 51); font-size: 14px; line-height: 28px;"><animation-list>

<item android:drawable="@drawable/girl1" android:duration="100/"> <item android:drawable="@drawable/girl2" android:duration="100/"> <item android:drawable="@drawable/girl3" android:duration="100/"></animation-list>

TextView使用的补间动画文件。新建res/anim/animation_dialog_txt.xml

<set android:fillbefore="true" android:fillenabled="true" android:repeatmode="restart" xmlns:android="http://schemas.android.com/apk/res/android">
 
    <translate android:duration="1000" android:fromxdelta="-20%" android:interpolator="@android:anim/accelerate_interpolator" android:toxdelta="0%">
    <translate android:duration="1000" android:fromxdelta="0%" android:interpolator="@android:anim/decelerate_interpolator" android:toxdelta="20%">
 
     
     
 
</alpha></alpha></translate></translate></set>

效果图

截屏效果太差，实际动画是很流畅的，相信我。

第二种、GIF动态图实现
这种是通过播放GIF动态图来达到动画效果。
首先这需要一个第三方的jar包，GifView.jar,将其 下载 之后导入项目

新建布局文件dialog_gif.xml

<linearlayout android:gravity="center" android:layout_height="wrap_content" android:layout_width="wrap_content" android:orientation="vertical" android:paddingbottom="20dp" android:paddingleft="80dp" android:paddingright="80dp" android:paddingtop="20dp" xmlns:android="http://schemas.android.com/apk/res/android">
 
    <com.ant.liao.gifview android:id="@+id/dialog_gifView" android:layout_height="wrap_content" android:layout_width="wrap_content">
 
    <textview android:gravity="center" android:id="@+id/dialog_gif_txt" android:layout_height="wrap_content" android:layout_margintop="10dp" android:layout_width="wrap_content" android:text="正在加载数据。。。" android:textcolor="@android:color/black" android:textsize="16sp">
 
</textview></com.ant.liao.gifview></linearlayout>

?

public static Dialog createGIFDialog(final Context context) {
        final Dialog dialog = new Dialog(context, R.style.dialog);
        dialog.setContentView(R.layout.dialog_gif);
        GifView gifView = (GifView) dialog.findViewById(R.id.dialog_gifView);
        gifView.setGifImage(R.drawable.ride);
        gifView.showAnimation();
        final TextView textView = (TextView) dialog
                .findViewById(R.id.dialog_gif_txt);
        Animation animation = AnimationUtils.loadAnimation(context,
                R.anim.animation_dialog_txt);
 
        animation.setAnimationListener(new AnimationListener() {
 
            @Override
            public void onAnimationEnd(Animation arg0) {
                Animation anim = AnimationUtils.loadAnimation(context,
                        R.anim.animation_dialog_txt);
                textView.startAnimation(anim);
                anim.setAnimationListener(this);
            }
 
            @Override
            public void onAnimationRepeat(Animation arg0) {
                // TODO Auto-generated method stub
 
            }
 
            @Override
            public void onAnimationStart(Animation arg0) {
                // TODO Auto-generated method stub
 
            }
 
        });
        // 绑定动画
        textView.startAnimation(animation);
        return dialog;
    }

效果图