Android实现水波纹外扩效果的实例代码,android水波纹动画

6
回复
527
查看
[复制链接]

446

主题

1124

帖子

1989

安币

手工艺人

发表于 2018-5-28 17:56:48 | 显示全部楼层 |阅读模式

            

        微信曾经推出了一个查找附近好友的功能,大致功能是这样的:屏幕上有一个按钮,长按按钮的时候,会有一圈圈水波纹的动画向外扩散,松手后,动画结束。

        现在简单来实现这样的一个动画功能:

        思路: 主要用到了下面的蓝色的图片,定义三个imageview,background都设置为蓝色的图片,然后定义一个包括缩放和透明度变化的动画集,然后每隔一段时间,让3个imageview依次启动这个动画集,看起来就像蓝色的圆圈像水波纹向外扩散一样。

        


        相关实现逻辑如下:

        activity_main.xml

[Java] 查看源文件 复制代码
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 <imageview 
 android:id="@+id/wave1" 
 android:layout_width="150dp" 
 android:layout_height="150dp" 
 android:layout_centerinparent="true" 
 android:background="@drawable/wave" 
 /> 
 <imageview 
 android:id="@+id/wave2" 
 android:layout_width="150dp" 
 android:layout_height="150dp" 
 android:layout_centerinparent="true" 
 android:background="@drawable/wave"/> 
 <imageview 
 android:id="@+id/wave3" 
 android:layout_width="150dp" 
 android:layout_height="150dp" 
 android:layout_centerinparent="true" 
 android:background="@drawable/wave" /> 
 <imageview 
 android:id="@+id/normal" 
 android:layout_width="166dp" 
 android:layout_height="166dp" 
 android:layout_centerinparent="true" 
 android:background="@drawable/normal" /> 
</relativelayout> 

        mainactivity.java

[Java] 查看源文件 复制代码
package com.jackie.waveanimation; 
import android.app.activity; 
import android.os.bundle; 
import android.os.handler; 
import android.os.message; 
import android.view.motionevent; 
import android.view.view; 
import android.view.animation.alphaanimation; 
import android.view.animation.animationset; 
import android.view.animation.scaleanimation; 
import android.widget.imageview; 
public class mainactivity extends activity { 
 private imageview mnormal, mwave1, mwave2, mwave3; 
 private animationset manimationset1, manimationset2, manimationset3; 
 private static final int offset = 600; //每个动画的播放时间间隔 
 private static final int msg_wave2_animation = 2; 
 private static final int msg_wave3_animation = 3; 
 private handler mhandler = new handler() { 
 @override 
 public void handlemessage(message msg) { 
 switch (msg.what) { 
 case msg_wave2_animation: 
 mwave2.startanimation(manimationset2); 
 break; 
 case msg_wave3_animation: 
 mwave3.startanimation(manimationset3); 
 break; 
 } 
 } 
 }; 
 @override 
 protected void oncreate(bundle savedinstancestate) { 
 super.oncreate(savedinstancestate); 
 setcontentview(r.layout.activity_main); 
 mnormal = (imageview) findviewbyid(r.id.normal); 
 mwave1 = (imageview) findviewbyid(r.id.wave1); 
 mwave2 = (imageview) findviewbyid(r.id.wave2); 
 mwave3 = (imageview) findviewbyid(r.id.wave3); 
 manimationset1 = initanimationset(); 
 manimationset2 = initanimationset(); 
 manimationset3 = initanimationset(); 
 mnormal.setontouchlistener(new view.ontouchlistener() { 
 @override 
 public boolean ontouch(view v, motionevent event) { 
 switch (event.getaction()) { 
 case motionevent.action_down: 
 showwaveanimation(); 
 break; 
 case motionevent.action_up: 
 clearwaveanimation(); 
 break; 
 case motionevent.action_cancel: 
 clearwaveanimation(); 
 } 
 return true; 
 } 
 }); 
 } 
 private animationset initanimationset() { 
 animationset as = new animationset(true); 
 scaleanimation sa = new scaleanimation(1f, 2.3f, 1f, 2.3f, 
 scaleanimation.relative_to_self, 0.5f, 
 scaleanimation.relative_to_self, 0.5f); 
 sa.setduration(offset * 3); 
 sa.setrepeatcount(animation.infinite);// 设置循环 
 alphaanimation aa = new alphaanimation(1, 0.1f); 
 aa.setduration(offset * 3); 
 aa.setrepeatcount(animation.infinite);//设置循环 
 as.addanimation(sa); 
 as.addanimation(aa); 
 return as; 
 } 
 private void showwaveanimation() { 
 mwave1.startanimation(manimationset1); 
 mhandler.sendemptymessagedelayed(msg_wave2_animation, offset); 
 mhandler.sendemptymessagedelayed(msg_wave3_animation, offset * 2); 
 } 
 private void clearwaveanimation() { 
 mwave1.clearanimation(); 
 mwave2.clearanimation(); 
 mwave3.clearanimation(); 
 } 
} 

        效果如下:

        







        

92

主题

9602

帖子

1971

安币

Android大神

Rank: 6Rank: 6

发表于 2018-5-28 19:26:56 | 显示全部楼层
每次我都积极回帖的,想要安币~

9

主题

9589

帖子

1779

安币

Android大神

Rank: 6Rank: 6

发表于 2018-5-28 23:07:33 | 显示全部楼层
感谢分享,楼主V5~

27

主题

9717

帖子

1873

安币

Android大神

Rank: 6Rank: 6

发表于 2018-5-29 03:21:36 | 显示全部楼层
帮帮顶顶!!

2

主题

9457

帖子

2478

安币

Android大神

Rank: 6Rank: 6

发表于 2018-5-29 06:45:24 | 显示全部楼层
感谢分享,楼主V5~

314

主题

1037

帖子

689

安币

手工艺人

发表于 2018-5-29 11:21:42 | 显示全部楼层
每次我都积极回帖的,想要安币~

325

主题

994

帖子

712

安币

手工艺人

发表于 2018-5-29 14:53:37 | 显示全部楼层
感谢大神~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )