Android实现水波纹扩散效果
程序员文章站
2022-06-23 14:57:26
本文实例为大家分享了android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下
先上图
囧!没有图片所以就拿了小安代替了。
先看一下如何使用这个view...
本文实例为大家分享了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实现水波纹外扩效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 软文营销如何后来者居上,超越竞争对手?