Android实现自定义华丽的水波纹效果

先来看看效果

实现效果

模拟水波纹的效果:点击屏幕就有圆环出现,半径从小到大,透明度从大到小(0为透明)

实现思路

1.自定义类继承View。

2.定义每个圆环的实体类 Wave,并初始化绘制圆环的画笔的数据。

3.重写onTouchEvent方法,down时,获得坐标点,做为圆环圆心。

4.发送handler信息,对数据进行修改,刷新页面。

5.重写onDraw方法,绘制一个圆环。

1. 自定义类继承View

新建WaterWaveView2类继承View

public class WaterWaveView2 extends View { //存放圆环的集合 private ArrayList<Wave> mList; //界面刷新 private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { invalidate();//刷新界面,会执行onDraw方法 } }; public WaterWaveView2(Context context) { this(context, null); } public WaterWaveView2(Context context, AttributeSet attrs) { super(context, attrs); mList = new ArrayList<Wave>(); }

2. 定义实体类 Wave

/** * Created by HongJay on 2016/8/30. * 把wave的数据封装成一个对象 */ public class Wave { public float x;//圆心x坐标 public float y;//圆心y坐标 public Paint paint; //画圆的画笔 public float width; //线条宽度 public int radius; //圆的半径 public int ranNum;//随机数 public int[] randomColor={Color.BLUE,Color.CYAN, Color.GREEN,Color.MAGENTA,Color.RED,Color.YELLOW}; public Wave(float x, float y) { this.x = x; this.y = y; initData(); } /** * 初始化数据,每次点击一次都要初始化一次 */ private void initData() { paint=new Paint();//因为点击一次需要画出不同的圆环 paint.setAntiAlias(true);//打开抗锯齿 ranNum=(int) (Math.random()*6);//[0,5]的随机数 paint.setColor(randomColor[ranNum]);//设置画笔的颜色 paint.setStyle(Paint.Style.STROKE);//描边 paint.setStrokeWidth(width);//设置描边宽度 paint.setAlpha(255);//透明度的设置(0-255),0为完全透明 radius=0;//初始化 width=0; } }

3. 重写onTouchEvent方法
获得圆心,并且删除集合中透明度为0的圆环,通知handler调用onDraw()方法

public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: float x = event.getX(); float y = event.getY(); deleteItem(); Wave wave = new Wave(x, y); mList.add(wave); //刷新界面 invalidate(); break; case MotionEvent.ACTION_MOVE: float x1 = event.getX(); float y1 = event.getY(); deleteItem(); Wave wave1 = new Wave(x1, y1); mList.add(wave1); invalidate(); break; } //处理事件 return true; } //删除透明度已经为0的圆环 private void deleteItem(){ for (int i = 0; i <mList.size() ; i++) { if(mList.get(i).paint.getAlpha()==0){ mList.remove(i); } } } }

4. 重写onDraw()方法,循环绘制圆环

protected void onDraw(Canvas canvas) { super.onDraw(canvas); //避免程序一运行就进行绘制 if (mList.size() > 0) { //对集合中的圆环对象循环绘制 for (Wave wave : mList) { canvas.drawCircle(wave.x, wave.y, wave.radius, wave.paint); wave.radius += 3; //对画笔透明度进行操作 int alpha = wave.paint.getAlpha(); if (alpha < 80) { alpha = 0; } else { alpha -= 3; } //设置画笔宽度和透明度 wave.paint.setStrokeWidth(wave.radius / 8); wave.paint.setAlpha(alpha); //延迟刷新界面 mHandler.sendEmptyMessageDelayed(1, 100); } } }

总结

以上就是Android实现自定义水波纹效果的全部内容,怎么样?实现的效果不错吧,感兴趣的小伙伴们快快自己动手实践起来,希望这篇文章对大家的学习和工作能有所帮助。

时间: 2024-11-09 02:18:10

Android实现自定义华丽的水波纹效果的相关文章

Android实现自定义华丽的水波纹效果_Android

先来看看效果 实现效果 模拟水波纹的效果:点击屏幕就有圆环出现,半径从小到大,透明度从大到小(0为透明) 实现思路       1.自定义类继承View.       2.定义每个圆环的实体类 Wave,并初始化绘制圆环的画笔的数据.       3.重写onTouchEvent方法,down时,获得坐标点,做为圆环圆心.       4.发送handler信息,对数据进行修改,刷新页面.       5.重写onDraw方法,绘制一个圆环. 1. 自定义类继承View 新建WaterWaveV

Android 自定义view实现水波纹效果

http://blog.csdn.net/tianjian4592/article/details/44222565 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分

Android自定义View实现水波纹效果

介绍:水波纹散开效果的控件在 App 里面还是比较常见的,例如 网易云音乐歌曲识别,附近搜索场景. 看下实现的效果: 实现思路: 先将最大圆半径与最小圆半径间距分成几等份,从内到外,Paint 透明度依次递减,绘制出同心圆,然后不断的改变这些同心圆的半径大小,延迟一定时间重绘,便达到了想外散开的动画效果了. public class WaveView extends View { private static final String TAG = "WaveView"; private

Android自定义View 实现水波纹动画引导效果

一.实现效果图 二.实现代码 1.自定义view package com.czhappy.showintroduce.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Pat

Android特效专辑(十)——点击水波纹效果实现,逻辑清晰实现简单

Android特效专辑(十)--点击水波纹效果实现,逻辑清晰实现简单 这次做的东西呢,和上篇有点类似,就是用比较简单的逻辑思路去实现一些比较好玩的特效,最近也是比较忙,所以博客更新的速度还得看时间去推演,但是也能保证一周三更的样子,现在也还是以小功能,或者说是一些小入门级别的博客为主,我也不算是什么很厉害的人,很多细节的支持处理的仍然还是不到位,所以也是一直在弥补,话不多说,来看看今天的效果 实现起来很简单吧,那我们就来看一下他是怎么实现的咯! OnclickRuning package com

Android实现兼容的水波纹效果_java

先看看效果图 其实,要实现这一效果很简单,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的selector: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@c

Android实现水波纹效果_Android

一.效果   点击开始:   点击停止: 二.在MainActivity中 import android.graphics.Paint; import android.os.Bundle; import android.support.v4.view.animation.LinearOutSlowInInterpolator; import android.support.v7.app.AppCompatActivity; import android.view.View; import and

as3类Rippler打造水波纹效果

通过Rippler类可以很方便地添加水波效果,例如:   使用代码: 2345 var rippler:Rippler = new Rippler(mc,40,6);stage.addEventListener(MouseEvent.CLICK,onClick);function onClick(e:MouseEvent):void{ rippler.drawRipple(mouseX,mouseY,15,1);} 类的下载地址:rippler 以上是小编为您精心准备的的内容,在的博客.问答.公

基于JS+Canves实现点击按钮水波纹效果_javascript技巧

近来看到个不错的按钮点击效果,当点击时产生一次水波涟漪效果,挺好玩的,于是简单的实现了下(没考虑低版本浏览器兼容问题) 先看看效果吧,如下图(录制gif软件有点渣,看起来卡卡的...) 这种效果可以由元素内嵌套canves实现,也可以由css3实现. Canves实现 网上摘了一份canves实现的代码,略微去掉了些重复定义的样式并且给出js注释,代码如下 html代码 <a class="btn color-1 material-design" data-color="