本文介绍开发WaveView
WaveView其实就是正弦曲线
正弦曲线可表示为y=Asin(ωx+φ)+k，定义为函数y=Asin(ωx+φ)+k在直角坐标系上的图象，其中sin为正弦符号，x是直角坐标系x轴上的数值，y是在同一直角坐标系上函数对应的y值，k、ω和φ是常数（k、ω、φ∈R且ω≠0）
- A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
(ωx+φ)——相位，反映变量y所处的状态。 - φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。
- k——偏距，反映在坐标系上则为图像的上移或下移。
- ω——角速度， 控制正弦周期(单位角度内震动的次数)。
需要画3条正弦曲线，先设置3个画笔
firstWavePaint.setColor(waveColor);
firstWavePaint.setStyle(Paint.Style.FILL);
firstWavePaint.setAntiAlias(true);
twoWavePaint.setColor(waveColor);
//设置透明度
twoWavePaint.setAlpha(140);
twoWavePaint.setStyle(Paint.Style.FILL);
twoWavePaint.setAntiAlias(true);
threeWavePaint.setColor(waveColor);
//设置透明度
threeWavePaint.setAlpha(40);
threeWavePaint.setStyle(Paint.Style.FILL);
threeWavePaint.setAntiAlias(true);
WaveView创建后在onLayout中计算振幅（波高），角速度
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
maxRight = getRight();
//振幅
waveHeight = getHeight() / 2;
//角速度
omega = PI2 / getWidth() * waveLengthMultiple;
}
接下来要绘制波浪线
/**
* calculate wave track
*/
private void calculatePath() {
firstWavePath.reset();
twoWavePath.reset();
threeWavePath.reset();
getWaveOffset();
float y;
firstWavePath.moveTo(getLeft(), getHeight() + 1);
for (float x = 0; x <= maxRight; x += X_SPACE) {
y = (float) (waveHeight * Math.sin(omega * x + firstOffset) + waveHeight);
Log.d("aaa", y + "---" + x);
firstWavePath.lineTo(x, y);
}
firstWavePath.lineTo(getRight(), getHeight() + 1);
twoWavePath.moveTo(getLeft(), getHeight());
for (float x = 0; x <= maxRight; x += X_SPACE) {
y = (float) (waveHeight * 0.8f * Math.sin(omega * x + twoOffset) + waveHeight);
twoWavePath.lineTo(x, y);
}
twoWavePath.lineTo(getRight(), getHeight());
threeWavePath.moveTo(getLeft(), waveHeight * 2);
for (float x = 0; x <= maxRight; x += X_SPACE) {
y = (float) (waveHeight * 0.6 * Math.sin(omega * x + threeOffset) + waveHeight);
threeWavePath.lineTo(x, y);
}
threeWavePath.lineTo(getRight(), waveHeight * 2);
}
然后需要让波浪动起来，需要创建一个类RefreshProgressRunnable继承Runnable
private class RefreshProgressRunnable implements Runnable {
public void run() {
synchronized (WaveView.this) {
calculatePath();
invalidate();
long gap = 70;
postDelayed(this, gap < 0 ? 0 : gap);
}
}
}
在View中重写onWindowVisibilityChanged方法，当View显示时不断绘制View,不显示时暂停绘制View，节省内存资源
@Override
protected void onWindowVisibilityChanged(int visibility) {
super.onWindowVisibilityChanged(visibility);
if (View.GONE == visibility) {
removeCallbacks(mRefreshProgressRunnable);
} else {
removeCallbacks(mRefreshProgressRunnable);
mRefreshProgressRunnable = new RefreshProgressRunnable();
post(mRefreshProgressRunnable);
}
}
在不断绘制View时需要改变正弦曲线的偏距，这样就可以有视差感firstOffset，twoOffset， threeOffset
private void getWaveOffset() {
if (firstOffset > Float.MAX_VALUE - 100) {
firstOffset = 0;
} else {
firstOffset += WaveHz;
}
if (twoOffset > Float.MAX_VALUE - 100) {
twoOffset = 0;
} else {
twoOffset += WaveHz;
}
if (threeOffset > Float.MAX_VALUE - 100) {
threeOffset = 0;
} else {
threeOffset += WaveHz;
}
}
其中WaveHz是偏移的距离
效果如下：
image
