Android实现仿水波效果

对于水波效果我们都见过,无非也就是水波纹一圈一圈的向外扩散,那么Android中能否实现呢?答案是肯定的,认真分析一下,我们就会发现Android中的layer-list能够很快实现这种效果。

效果图

制作gif有点麻烦,就静态图片凑合着看吧。。。

在drawable目录下新建资源文件实现水波页面

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
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#77FFFFFF" />
</shape>
</item>
<item
android:left="15dp"
android:top="15dp"
android:right="15dp"
android:bottom="15dp">
<shape android:shape="oval">
<solid android:color="#99FFFFFF" />
</shape>
</item>
<item
android:left="27dp"
android:top="27dp"
android:right="27dp"
android:bottom="27dp">
<shape android:shape="oval">
<solid android:color="#BBFFFFFF" />
</shape>
</item>
<item
android:left="36dp"
android:top="36dp"
android:right="36dp"
android:bottom="36dp">
<shape android:shape="oval">
<solid android:color="#DDFFFFFF" />
</shape>
</item>
<item
android:left="42dp"
android:top="42dp"
android:right="42dp"
android:bottom="42dp">
<shape android:shape="oval">
<solid android:color="#FFFFFF" />
<size android:width="90dp"
android:height="90dp"/>
</shape>
</item>
</layer-list>

在布局文件中设置View的background或src属性为上面的资源

1
android:background="@drawable/water_style"

实现水波动画:

方式一:代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private AnimationSet initAnimationSet() {
AnimationSet as = new AnimationSet(true);
as.setInterpolator(new DecelerateInterpolator());
// 设置缩放动画
ScaleAnimation sa = new ScaleAnimation(1f, 2.0f, 1f, 2.0f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
sa.setDuration(2000);
sa.setRepeatCount(Animation.INFINITE);
// 设置透明度动画
AlphaAnimation alpha = new AlphaAnimation(1.0f, 0);
alpha.setDuration(2000);
alpha.setRepeatCount(Animation.INFINITE);//设置循环
as.addAnimation(sa);
as.addAnimation(alpha);
return as;
}

方式二:xml实现

在res/anim中新建动画文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:repeatMode="restart"
android:shareInterpolator="true">
<!-- 设置缩放动画 -->
<scale android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.0"
android:toYScale="2.0"
android:repeatCount="-1" />
<!-- 设置透明度动画 -->
<alpha android:fromAlpha="1.0"
android:toAlpha="0"
android:repeatCount="-1"/>
</set>

为设置了水波效果的View设置动画:

1
2
3
4
// xml动画的加载
view.startAnimation(AnimationUtils.loadAnimation(this, R.anim.water_style_anim));
// java设置动画的加载
view.startAnimation(initAnimationSet());

至此,整个水波效果就完成了,对于水波的宽度和颜色也可以根据自己的需求自行定义。

,