Android实现水波纹扩散效果

2019-07-31| 发布者: admin| 查看: |

本文实例为大家分享了android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下

先上图

囧!没有图片所以就拿了小安代替了。

先看一下如何使用这个view。

 jianpan.com.mybutton.view.ripplediffuse
 android:layout_width="200dp"
 android:layout_height="200dp"
 app:btn_img_res="@drawable/rd"
 app:ripple_img_res="@drawable/rd" 
 /jianpan.com.mybutton.view.ripplediffuse 

是的,没有别的代码了,就这么简单

实现思路

自定义viewgroup,创建一个用显示图片的view,在创建几个,大小相同的imageview。当按下时,对这几个imageview进行放大和渐变。

代码

首先它肯定是一个正方形。

@override
protected void onmeasure {
 super.onmeasure;
 if {
 initdata;
}

显示图片的view的大小,该怎么给?这是个比较蛋疼的问题。给大了就看不到扩散效果了,给小,给多少的值合适呢?有没有正好的值,有的用父 view 的 size / 子 view 放大的倍数,这样肯定会达到理想的效果。

private static final int animation_each_offset = 800; // 每个动画的播放时间间隔
private static final int ripple_view_count = 3;//波纹view的个数
private static final float default_scale = 1.6f;//波纹放大后的大小
//点击有扩散效果的view
private circleimageview mbtnimg;
private int mbtnviewheight;
private int mbtnviewwidth;
private float mscale = default_scale;
//图片资源
private int mbtnimgres;
private int mrippleres;
//是否初始化完成
private boolean minitdatasucceed = false;
private void initdata{
 if  0 && getmeasuredwidth 0){
 minitdatasucceed = true;
 int height = getmeasuredheight - getpaddingtop - getpaddingbottom;
 int width = getmeasuredwidth - getpaddingleft - getpaddingright;
 mbtnviewheight =  ;
 mbtnviewwidth =  ;
 mbtnimg = new circleimageview);
 mbtnimg.setimageresource;
 mbtnimg.setontouchlistener;
 addview);
 for {
 //创建view
 circleimageview wave = createwave;
 mwaves.add;
 //创建动画
 manimas.add);
 addview);
private circleimageview createwave{
 circleimageview circleimageview = new circleimageview);
 circleimageview.setscaletype;
 circleimageview.setimageresource;
 return circleimageview;
private layoutparams getwavelayoutparams{
 layoutparams lp = new layoutparams;
 return lp;
private animationset getnewanimationset {
 animationset as = new animationset;
 scaleanimation sa = new scaleanimation;
 sa.setduration;
 sa.setrepeatcount;// 设置循环
 alphaanimation anialp = new alphaanimation;
 anialp.setrepeatcount;// 设置循环
 as.setduration;
 as.addanimation;
 as.addanimation;
 return as;
}

view 都初始化完成了,好像还差一步,onlayout,只要把子 view 都显示到中先就可以了。

@override
protected void onlayout {
 if  {
 int childleft =  - mbtnviewwidth) / 2;
 int childtop =  - mbtnviewheight) / 2;
 for  {
 circleimageview wave = mwaves.get;
 wave.layout;
 mbtnimg.layout;
 }else {
 initdata;
}

最后处理一下图片的ontouch事件。

@override
public boolean ontouch {
 switch ) {
 case motionevent.action_down:
 showwaveanimation;
 break;
 case motionevent.action_move:
 break;
 case motionevent.action_up:
 case motionevent.action_cancel:
 cancelwaveanimation;
 break;
 default:
 cancelwaveanimation;
 break;
 return true;
private void showwaveanimation {
 for {
 message message = new message;
 message.obj = i;
 handler.sendmessagedelayed;
private void cancelwaveanimation {
 for {
 circleimageview wave = mwaves.get;
 wave.clearanimation;
private handler handler = new handler {
 @override
 public void handlemessage {
 int position =  msg.obj;
 circleimageview wave = mwaves.get;
 wave.startanimation);
 super.handlemessage;
};

参考地址:android实现水波纹外扩效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。