实习入职第八天：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>
|
|
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;
}
效果图
