【移动开发】Android波纹动画效果实现
今天我实现一个wifi当中搜索时的动画效果，通常我们会使用多张图片进行Frame动画播放，这里我使用了Tween动画,仅对一张图片进行操作，实现了wifi扫描动画效果，有兴趣的可以看看！
效果图：
这里我们采用了自定义布局的方式 activity_main.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<
RelativeLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
xmlns:tools
=
"http://schemas.android.com/tools"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
>
<
com.zhf.android_ripple.AnimationFrameLayout
android:id
=
"@+id/search_animation_wf_main"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
>
</
com.zhf.android_ripple.AnimationFrameLayout
>
<
Button
android:id
=
"@+id/button1"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_alignParentRight
=
"true"
android:text
=
"开启波纹动画"
/>
</
RelativeLayout
>
|
AnimationFrameLayout类：
|
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
package
com.zhf.android_ripple;
import
java.lang.ref.SoftReference;
import
android.content.Context;
import
android.graphics.Bitmap;
import
android.graphics.BitmapFactory;
import
android.util.AttributeSet;
import
android.util.Log;
import
android.view.LayoutInflater;
import
android.view.View;
import
android.view.animation.AccelerateDecelerateInterpolator;
import
android.view.animation.AlphaAnimation;
import
android.view.animation.Animation;
import
android.view.animation.Animation.AnimationListener;
import
android.view.animation.AnimationSet;
import
android.view.animation.ScaleAnimation;
import
android.widget.FrameLayout;
import
android.widget.ImageView;
public
class
AnimationFrameLayout
extends
FrameLayout {
private
SoftReference<Bitmap> m_bitmapRipple;
//波纹图片 （软引用）
private
ImageView[] m_imageVRadars;
//ImageView数组
public
AnimationFrameLayout(Context context) {
super
(context);
init();
}
public
AnimationFrameLayout(Context context, AttributeSet attrs,
int
defStyle) {
super
(context, attrs, defStyle);
init();
}
public
AnimationFrameLayout(Context context, AttributeSet attrs) {
super
(context, attrs);
init();
}
/**初始化**/
private
void
init() {
loadRadarBitmap();
m_imageVRadars =
new
ImageView[
3
];
View v = LayoutInflater.from(getContext()).inflate(R.layout.wt_search_device_anima,
this
);
m_imageVRadars[
0
] = (ImageView) v.findViewById(R.id.radar_ray_1);
m_imageVRadars[
1
] = (ImageView) v.findViewById(R.id.radar_ray_2);
m_imageVRadars[
2
] = (ImageView) v.findViewById(R.id.radar_ray_3);
}
/**加载图片**/
private
void
loadRadarBitmap() {
try
{
//获取波纹图片
m_bitmapRipple =
new
SoftReference<Bitmap>(BitmapFactory.decodeStream(getContext().getResources()
.openRawResource(R.drawable.wifi_body_ripple)));
}
catch
(Exception localException) {
Log.e(
"WTSearchAnimationFrameLayout"
,
Log.getStackTraceString(localException));
}
catch
(OutOfMemoryError localOutOfMemoryError) {
Log.e(
"WTSearchAnimationFrameLayout"
,
Log.getStackTraceString(localOutOfMemoryError));
System.gc();
//回收
}
}
/**重置，停止动画**/
public
void
stopAnimation() {
for
(
int
i=
0
; i< m_imageVRadars.length; ++i) {
if
(m_bitmapRipple !=
null
){
Bitmap localBitmap = m_bitmapRipple.get();
//软引用获取对象
if
(localBitmap !=
null
&& !localBitmap.isRecycled()) {
//回收图片资源
localBitmap.recycle();
}
m_bitmapRipple =
null
;
ImageView localImageView = m_imageVRadars[i];
localImageView.setImageBitmap(
null
);
//设置ImageView为空
localImageView.setVisibility(View.GONE);
localImageView.clearAnimation();
//取消动画
}
}
}
/**开始动画**/
public
void
startAnimation() {
if
(m_bitmapRipple ==
null
) {
loadRadarBitmap();
}
for
(
int
i =
0
; i < m_imageVRadars.length; i++) {
ImageView localImageView;
long
ltime;
while
(
true
) {
localImageView = m_imageVRadars[i];
localImageView.setImageBitmap(m_bitmapRipple.get());
//获取图片
localImageView.setVisibility(View.VISIBLE);
//放大
ltime= 333L * i;
if
(localImageView.getAnimation() ==
null
) {
break
;
}
localImageView.getAnimation().start();
}
ScaleAnimation localScaleAnimation =
new
ScaleAnimation(
1
.0f,
14
.0f,
1
.0f,
14
.0f,
1
,
0
.5f,
1
,
0
.5f);
localScaleAnimation.setRepeatCount(-
1
);
//动画重复
AlphaAnimation localAlphaAnimation =
new
AlphaAnimation(
1
.0f,
0
.2f);
AnimationSet localAnimationSet =
new
AnimationSet(
true
);
//true:使用相同的加速器
localAnimationSet.addAnimation(localScaleAnimation);
localAnimationSet.addAnimation(localAlphaAnimation);
//将两种动画效果添加进去
//设置相关属性
localAnimationSet.setDuration(1000L);
//持续时间
localAnimationSet.setFillEnabled(
true
);
localAnimationSet.setFillBefore(
true
);
//控件保持在动画开始之前
localAnimationSet.setStartOffset(ltime);
//动画效果推迟ltime秒钟后启动
localAnimationSet.setInterpolator(
new
AccelerateDecelerateInterpolator());
localAnimationSet.setAnimationListener(
new
MySearchAnimationHandler(
this
,localImageView));
//绑定监听器
//将动画集合设置进去
localImageView.setAnimation(localAnimationSet);
localImageView.startAnimation(localAnimationSet);
//开启动画
}
}
/**动画监听类**/
public
class
MySearchAnimationHandler
implements
AnimationListener{
private
ImageView m_imageVRadar;
public
MySearchAnimationHandler(AnimationFrameLayout paramImageView,ImageView m_imageVRadar) {
super
();
this
.m_imageVRadar = m_imageVRadar;
}
@Override
public
void
onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public
void
onAnimationEnd(Animation animation) {
this
.m_imageVRadar.setVisibility(View.GONE);
}
@Override
public
void
onAnimationRepeat(Animation animation) {
animation.setStartOffset(0L);
}
}
}
|
重要说明：
1.该类中我们对图片的操作使用软引用，目的是防止OOM.
2.至于动画，使用ImageView[]来依次加载图片，通过更改对每个ImageView实现缩放和透明动画
动画布局 wt_search_device_anima.xml
|
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
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
RelativeLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
>
<
ImageView
android:id
=
"@+id/radar_ray_1"
android:layout_width
=
"70.0dip"
android:layout_height
=
"70.0dip"
android:layout_alignParentRight
=
"true"
android:layout_alignParentTop
=
"true"
android:layout_marginLeft
=
"10.0dip"
/>
<
ImageView
android:id
=
"@+id/radar_ray_2"
android:layout_width
=
"70.0dip"
android:layout_height
=
"70.0dip"
android:layout_alignParentRight
=
"true"
android:layout_alignParentTop
=
"true"
android:layout_marginLeft
=
"10.0dip"
/>
<
ImageView
android:id
=
"@+id/radar_ray_3"
android:layout_width
=
"70.0dip"
android:layout_height
=
"70.0dip"
android:layout_alignParentRight
=
"true"
android:layout_alignParentTop
=
"true"
android:layout_marginLeft
=
"10.0dip"
/>
</
RelativeLayout
>
|
程序主入口：
|
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
|
package
com.zhf.android_ripple;
import
android.os.Bundle;
import
android.app.Activity;
import
android.view.View;
import
android.view.View.OnClickListener;
import
android.widget.Button;
public
class
MainActivity
extends
Activity {
public
Button m_btn1;
AnimationFrameLayout afl;
//动画布局
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
afl = ((Animat ionFrameLayout) findViewById(R.id.search_animation_wf_main));
// 搜索时的动画
m_btn1 = (Button) findViewById(R.id.button1);
m_btn1.setOnClickListener(
new
OnClickListener() {
@Override
public
void
onClick(View v) {
afl.startAnimation();
}
});
}
@Override
protected
void
onDestroy() {
// TODO Auto-generated method stub
super
.onDestroy();
afl.stopAnimation();
}
}
|
ok! 源码已添加！试试效果吧！
本文转自zhf651555765 51CTO博客，原文链接：http://blog.51cto.com/smallwoniu/1334425，如需转载请自行联系原作者
