效果图：
实现原理：先画出一个波形，不断地改变波形的颜色透明度和半径达到视觉上的动态效果。直接上代码
- 自定义的WaterView
package com.example.customwaterview;
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;
public class WaterView extends View {
//画笔
private Paint mPaint;
//波形的最大半径
private float mWaveMaxRadio;
//波形移动的速度
private float mWaveSpeed;
//波形起始宽度
private float mWaveStartWidth;
//波形终止宽度
private float mWaveEndWidth;
//波形的颜色
private int mWaveColor;
//两波形之间的间距
private float mWaveIntervalSize;
//波集合
List<Wave> mWaveList;
/**渐变控制器 */
private Interpolator interpolator = new LinearInterpolator();
//波纹状态
private boolean isStart = false;
//中心坐标
private float mViewCenterX;
private float mViewCenterY;
public WaterView(Context context) {
this(context,null);
}
public WaterView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public WaterView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
/** * 初始化 */
private void init() {
mPaint = new Paint();
mWaveList = new ArrayList<>();
setWaveInfo(60f, 1f, 3f, 8f, Color.RED);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isStart) {
//更新波的属性
updateWaveAttr();
}
//画出所有波形
for (Wave w : mWaveList) {
mPaint.setColor(w.color);
mPaint.setAntiAlias(true);
mPaint.setStyle(Style.STROKE);
mPaint.setStrokeWidth(w.width);// 设置线宽度
canvas.drawCircle(mViewCenterX, mViewCenterY, w.radius, mPaint);
}
//延时10ms刷新
postInvalidateDelayed(10);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
super.onLayout(changed, left, top, right, bottom);
// 设置中心坐标
mViewCenterX = getWidth() / 2;
mViewCenterY = getHeight() / 2;
//设置最大波半径
mWaveMaxRadio = Math.min(mViewCenterX, mViewCenterY);
}
/** * 启动波纹 */
public void startWave() {
this.isStart = true;
}
/** * 停止波纹 */
public void stopWave() {
this.isStart = false;
resetWave();
}
/** * 重置波纹 */
public void resetWave() {
mWaveList.clear();
}
/** * 更新波的半径、宽度、颜色属性，达到视觉动态移动效果 */
private void updateWaveAttr() {
Wave nearestWave = mWaveList.isEmpty() ? null : mWaveList.get(0);
if (nearestWave == null || nearestWave.radius >= mWaveIntervalSize) {// 控制两个波形之间的间隔
//将元素添加到List的第一个，其他元素往后移
mWaveList.add(0, new Wave());
}
int size = mWaveList.size();
for (int i = 0; i < size; i++) {
Wave w = mWaveList.get(i);
float rP = w.radius / mWaveMaxRadio;
if (rP > 1f) {
rP = 1f;
}
float factor = interpolator.getInterpolation(1 - rP);
//半径递增
w.radius += mWaveSpeed;
//宽度渐变
w.width = mWaveStartWidth + mWaveEndWidth*rP;
//颜色渐变
w.color = mWaveColor & 0x00FFFFFF
| ((int) (255 * factor) << 24);
}
//移除超出最大半径的波
Wave farthestWave = mWaveList.get(size - 1);
if (farthestWave.radius > mWaveMaxRadio + farthestWave.width) {
mWaveList.remove(size - 1);
}
}
/** * 设置波形属性 * * @param intervalSize * 两个波形之间的间距 * @param stireStep * 波形移动速度 * @param startWidth * 起始波形宽度 * @param endWidth * 终止波形宽度 * @param color * 波形颜色 */
public void setWaveInfo(float intervalSize, float stireStep,
float startWidth, float endWidth, int color) {
mWaveIntervalSize = intervalSize;
mWaveSpeed = stireStep;
mWaveStartWidth = startWidth;
mWaveEndWidth = endWidth;
mWaveColor = color;
}
/** * 波 * @author FLST-YF-ZZW * */
public class Wave {
public float radius;// 半径
public float width;// 波宽
public int color;// 颜色
public Wave() {
radius = 0;
width = mWaveStartWidth;
color = mWaveColor;
}
public float getRadius() {
return radius;
}
public void setRadius(float radius) {
this.radius = radius;
}
}
}
4.MainActivity就是几个Button的监听事件
package com.example.customwaterview;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity implements OnClickListener{
//自定义的WaterView
WaterView mWaterView;
Button mbtnStart,mbtnStop,mbtnReset;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
setListener();
}
private void initView() {
mWaterView = (WaterView) findViewById(R.id.cwv);
mbtnStart = (Button) findViewById(R.id.btnStart);
mbtnStop = (Button) findViewById(R.id.btnStop);
mbtnReset = (Button) findViewById(R.id.btnReset);
}
private void setListener() {
mbtnStart.setOnClickListener(this);
mbtnStop.setOnClickListener(this);
mbtnReset.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btnStart:
mWaterView.startWave();
break;
case R.id.btnStop:
mWaterView.stopWave();
break;
case R.id.btnReset:
mWaterView.resetWave();
break;
}
}
}
布局文件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" >
<com.example.customwaterview.WaterView android:id="@+id/cwv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" />
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" >
<Button android:id="@+id/btnStart" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="启动波纹" />
<Button android:id="@+id/btnStop" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="停止波纹" />
<Button android:id="@+id/btnReset" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="重置波纹" />
</LinearLayout>
</RelativeLayout>
源码下载：
> http://download.csdn.net/detail/wujiewei2342/9405776