Android 仿书旗小说的波浪

本文介绍开发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

源码地址：https://github.com/liu8021203/WaveView