前言
讲真，这不算一个新的课题。早在几个月之前就已经有大神开源了水波浪效果的代码。由于工作关系，一直未能拜读。直至近期公司项目有需要，才决定去接触下该效果。
同时申明一下，在能力范围之内，楼主愿意不惜一切时间代价去造轮子，因为出现bug时，改自己熟悉的代码会很省事。同时也是对技能的巩固和提升。
目前，已经发表的博文中，实现水波纹的效果大致分为两类：
- 使用贝塞尔曲线。
- 使用三角函数曲线。
在物理学中，通常使用三角函数表达式从数学的角度描述波的特征，如：机械波、声波等。因此楼主即使用三角函数实现水波纹效果。
机械波表达式：Y＝A*sin(ωt+Φ)
效果图
二话不说，先上图，觉得效果好再往下看。
这是一种组合的实现方式：两个水波浪组件叠加，再在水波浪组件上面或下面添加一个矩形的蓝色块。采用组合方式，主要使组件具有更高的扩展性。
布局如下：
<View
android:layout_width="match_parent"
android:layout_height="@dimen/dp_100_h"
android:background="#DD3958AA" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.flueky.frame.widget.WaveView
android:layout_width="match_parent"
android:layout_height="@dimen/dp_50_h"
app:color="#993958AA"
app:fill_mode="top"
app:omega="1.2"
app:phi="1"
app:speed="-5" />
<com.flueky.frame.widget.WaveView
android:layout_width="match_parent"
android:layout_height="@dimen/dp_50_h"
app:color="#AA3958AA"
app:fill_mode="top"
app:phi="100"
app:speed="-5" />
RelativeLayout>
复制代码原理
分析机械波公式，有三个常量参数：A、ω和Φ。
A对应组件高度的一半。ω对应自定义属性omega。Φ对应自定义属性phi。
通过 ω和Φ 决定波浪的初始状态，使用speed属性决定波浪变化速率。
实现
自定义属性
<declare-styleable name="wave">
<attr name="color" format="color" />
<attr name="fill_mode">
<enum name="top" value="1" />
<enum name="bottom" value="2" />
attr>
<attr name="speed" format="integer" />
<attr name="phi" format="integer" />
<attr name="omega" format="float"/>
declare-styleable>
复制代码代码
不喜欢看又臭又长的代码请跳过，后面有分析。（平生最恨只贴代码不分析的博主）
public class WaveView extends View {
private static final String TAG = "WaveView";
private int width = 0;
private int height = 0;
private Path shapePath;
private int step = 20;
private Paint fillPaint;
private double omega;
private double phi;
private int delta = -2;//每次位移角度，大于0向左，小于0 向右
private boolean fillTop = true;
private int waveColor;
public WaveView(Context context) {
this(context, null);
}
public WaveView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.wave);
initParams(context, typedArray);
typedArray.recycle();
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.wave);
initParams(context, typedArray);
typedArray.recycle();
}
private void initParams(Context context, TypedArray typedArray) {
waveColor = typedArray.getColor(R.styleable.wave_color, Color.parseColor("#3958AA"));
fillTop = typedArray.getInt(R.styleable.wave_fill_mode, 1) == 1;// 默认绘制上层
delta = typedArray.getInt(R.styleable.wave_speed, -2); //默认向右移动
omega = typedArray.getFloat(R.styleable.wave_omega, 3 * 1.0f / 4);// 角频率
phi = typedArray.getInt(R.styleable.wave_phi, 0) * Math.PI / 180 + Math.PI / 2 * -1;// 初始相位角
fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
fillPaint.setStrokeWidth(1);
fillPaint.setStyle(Paint.Style.FILL);
fillPaint.setColor(waveColor);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
shapePath = new Path();
if (fillTop)
shapePath.moveTo(0, 0);
else
shapePath.moveTo(0, height + 1);
for (int x = 0; x <= width; x += step) {
double angle = x * 1.0f / width * 2 * Math.PI;// 弧度
double y = height / 2 * Math.sin(angle * omega + phi);
shapePath.lineTo(x, (float) y + height / 2);
}
if (fillTop) {
shapePath.lineTo(width, 0);
} else {
shapePath.lineTo(width, height + 1);
}
canvas.drawPath(shapePath, fillPaint);
postInvalidateDelayed(25); // 每秒刷新40次
addPhi();
}
/**
* 增加相位角
*/
private void addPhi() {
phi += delta * Math.PI / 180;
if (phi > Math.PI * 2)
phi -= Math.PI * 2;
else if (phi < Math.PI * -2)
phi += Math.PI * 2;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
/**
* 组件测量
* 布局里指定的size使用布局的size
* 属性里指定的size使用属性的size
* 都没有指定，使用默认size
*/
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = 0;
if (widthMode == MeasureSpec.EXACTLY) {
widthSize = MeasureSpec.getSize(widthMeasureSpec);
width = widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
widthSize = width;
}
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = 0;
if (heightMode == MeasureSpec.EXACTLY) {
heightSize = MeasureSpec.getSize(heightMeasureSpec);
height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
heightSize = height;
}
setMeasuredDimension(widthSize, heightSize);
}
复制代码不到120行的代码，看起来是不是很简单的样子。
到这里，需要的小伙伴们，就可以很方便的拿去集成了，一个组件类，一个自定义属性文件和一个布局的使用示例，足以。
下面主要讲解三个模块：初始化参数，测量高度，绘制并刷新波浪。
初始化参数
private void initParams(Context context, TypedArray typedArray) {
// 获取自定义属性值
waveColor = typedArray.getColor(R.styleable.wave_color, Color.parseColor("#3958AA"));
fillTop = typedArray.getInt(R.styleable.wave_fill_mode, 1) == 1;// 默认绘制上层
delta = typedArray.getInt(R.styleable.wave_speed, -2); //默认向右移动
omega = typedArray.getFloat(R.styleable.wave_omega, 3 * 1.0f / 4);// 角频率
phi = typedArray.getInt(R.styleable.wave_phi, 0) * Math.PI / 180 + Math.PI / 2 * -1;// 初始相位角
// 初始化画笔参数
fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG); // 设置抗锯齿
fillPaint.setStrokeWidth(1); // 设置边线宽度
fillPaint.setStyle(Paint.Style.FILL); // 这是画笔的填充模式，不同于之前的fill_mode属性
fillPaint.setColor(waveColor); // 设置画笔颜色
}
复制代码测量高度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
/**
* 组件测量
* 布局里指定的size使用布局的size
* 属性里指定的size使用属性的size，此处位置线，可以添加自定义属性操作
* 都没有指定，使用默认size
*/
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = 0;
if (widthMode == MeasureSpec.EXACTLY) {
widthSize = MeasureSpec.getSize(widthMeasureSpec);
width = widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
widthSize = width;
}
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = 0;
if (heightMode == MeasureSpec.EXACTLY) {
heightSize = MeasureSpec.getSize(heightMeasureSpec);
height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
heightSize = height;
}
setMeasuredDimension(widthSize, heightSize);
}
复制代码绘制并刷新波浪
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
shapePath = new Path();
/**
* 设置路径起点
*/
if (fillTop)
shapePath.moveTo(0, 0);
else
shapePath.moveTo(0, height + 1); // 加一为了防止和底部矩形拼接时有1px的空隙。
for (int x = 0; x <= width; x += step) {
double angle = x * 1.0f / width * 2 * Math.PI;// 对应的横坐标转成弧度，弧度区间0~2π
double y = height / 2 * Math.sin(angle * omega + phi); // 计算出纵坐标
shapePath.lineTo(x, (float) y + height / 2);
}
/**
* 设置路径终点
*/
if (fillTop) {
shapePath.lineTo(width, 0);
} else {
shapePath.lineTo(width, height + 1); // 加一为了防止和底部矩形拼接时有1px的空隙。
}
canvas.drawPath(shapePath, fillPaint); // 绘制并填充波浪图形路径。
postInvalidateDelayed(25); // 每秒刷新40次
addPhi(); // 相位角值+1，实现波浪移动效果
}
复制代码由于，
Math.sin采用弧度计算的方式，为方便开发者使用，关于sin函数参数的变量，一律使用角度制，因此存在一些难以明白的转换。
叠加使用
样图中，使用叠加的方式，同时显示两条不一样的波浪。 需要注意修改omega、phi、speed值和正确计算透明度叠加效果。
色值：993958AA+AA3958AA = DD3958AA ？
这是ARGB四通道的色值叠加计算，由于RGB色值一致，此处只讨论Alpha通道(透明度)的叠加计算。
记： 透明度 A = 0x99/xFF ≈ 0.60，透明度 B = 0xAA/0xFF ≈ = 0.66； 透明度 C = A+B-AxB = 0.864 x 0xFF ≈ 0xDD;