欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现水波纹扩散效果

程序员文章站 2022-06-23 14:57:26
本文实例为大家分享了android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下 先上图 囧!没有图片所以就拿了小安代替了。 先看一下如何使用这个view...

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

先上图

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(int widthmeasurespec, int heightmeasurespec) {
 super.onmeasure(widthmeasurespec, widthmeasurespec);
 if (!minitdatasucceed){
 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 (getmeasuredheight() > 0 && getmeasuredwidth() > 0){
 minitdatasucceed = true;

 int height = getmeasuredheight() - getpaddingtop() - getpaddingbottom();
 int width = getmeasuredwidth() - getpaddingleft() - getpaddingright();
 mbtnviewheight = (int) (height / mscale);
 mbtnviewwidth = (int) (width / mscale);

 mbtnimg = new circleimageview(getcontext());
 mbtnimg.setimageresource(mbtnimgres);
 mbtnimg.setontouchlistener(this);

 addview(mbtnimg, getwavelayoutparams());

 for (int i = 0; i < ripple_view_count; i++){
  //创建view
  circleimageview wave = createwave();
  mwaves.add(wave);
  //创建动画
  manimas.add(getnewanimationset());

  addview(wave, 0, getwavelayoutparams());
 }
 }
}
private circleimageview createwave(){
 circleimageview circleimageview = new circleimageview(getcontext());
 circleimageview.setscaletype(imageview.scaletype.center_crop);
 circleimageview.setimageresource(mrippleres);
 return circleimageview;
}

private layoutparams getwavelayoutparams(){
 layoutparams lp = new layoutparams(mbtnviewwidth, mbtnviewheight);
 return lp;
}

private animationset getnewanimationset() {
 animationset as = new animationset(true);
 scaleanimation sa = new scaleanimation(1f, mscale, 1f, mscale,
  scaleanimation.relative_to_self, 0.5f,
  scaleanimation.relative_to_self, 0.5f);
 sa.setduration(animation_each_offset * 3);
 sa.setrepeatcount(-1);// 设置循环
 alphaanimation anialp = new alphaanimation(1, 0.1f);
 anialp.setrepeatcount(-1);// 设置循环
 as.setduration(animation_each_offset * 3);
 as.addanimation(sa);
 as.addanimation(anialp);
 return as;
}

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

@override
protected void onlayout(boolean changed, int left, int top, int right, int bottom) {
 if (minitdatasucceed) {
 int childleft = (getmeasuredwidth() - mbtnviewwidth) / 2;
 int childtop = (getmeasuredheight() - mbtnviewheight) / 2;
 for (int i = 0; i < ripple_view_count; i++) {
  circleimageview wave = mwaves.get(i);
  wave.layout(childleft, childtop, mbtnviewwidth + childleft, mbtnviewheight + childtop);
 }
 mbtnimg.layout(childleft, childtop, mbtnviewwidth + childleft, mbtnviewheight + childtop);
 }else {
 initdata();
 }
}

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

@override
public boolean ontouch(view v, motionevent event) {
 switch (event.getaction()) {
 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 (int i = 0; i < ripple_view_count; i++){
 message message = new message();
 message.obj = i;
 handler.sendmessagedelayed(message, animation_each_offset * i);
 }
}

private void cancelwaveanimation() {
 for (int i = 0; i < ripple_view_count; i++){
 circleimageview wave = mwaves.get(i);
 wave.clearanimation();
 }
}

private handler handler = new handler() {
 @override
 public void handlemessage(message msg) {
 int position = (int) msg.obj;
 circleimageview wave = mwaves.get(position);
 wave.startanimation(manimas.get(position));
 super.handlemessage(msg);
 }
};

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

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