当前位置: 代码迷 >> Android >> Android带动画成效的弹窗
  详细解决方案

Android带动画成效的弹窗

热度:28   发布时间:2016-04-28 02:12:38.0
Android带动画效果的弹窗
在网络加载数据的时候通常需要很多时间,这个时候程序里面经常需要写一个提示正在加载数据的弹窗,这篇文章用两种方式实现带动画效果的Dialog:帧动画实现和GIF动态图实现,它们都能达到动画的效果
第一种、帧动画实现
自定义一个Dialog,先看一下布局文件dialog_animation.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center"    android:orientation="vertical"    android:paddingBottom="20dp"    android:paddingLeft="80dp"    android:paddingRight="80dp"    android:paddingTop="20dp" >    <ImageView        android:id="@+id/dialog_animation_img"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <TextView        android:id="@+id/dialog_animation_txt"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:gravity="center"        android:text="正在加载数据。。。"        android:textColor="@android:color/black"        android:textSize="16sp" /></LinearLayout>
ImageView用来显示动画,TextView用于提示用户我们正在加载数据
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
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false" >    <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 xmlns:android="http://schemas.android.com/apk/res/android"    android:fillBefore="true"    android:fillEnabled="true"    android:repeatMode="restart" >    <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        android:duration="1000"        android:fromAlpha="0.0"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:toAlpha="1" />    <alpha        android:duration="200"        android:fromAlpha="1"        android:interpolator="@android:anim/decelerate_interpolator"        android:toAlpha="0.8" /></set>

效果图

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

第二种、GIF动态图实现
这种是通过播放GIF动态图来达到动画效果。
首先这需要一个第三方的jar包,GifView.jar,将其下载之后导入项目
新建布局文件dialog_gif.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center"    android:orientation="vertical"    android:paddingBottom="20dp"    android:paddingLeft="80dp"    android:paddingRight="80dp"    android:paddingTop="20dp" >    <com.ant.liao.GifView        android:id="@+id/dialog_gifView"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <TextView        android:id="@+id/dialog_gif_txt"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:gravity="center"        android:text="正在加载数据。。。"        android:textColor="@android:color/black"        android:textSize="16sp" /></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;	}

效果图


源码下载







  相关解决方案