效果演示

程式碼呼叫與實現效果

xml中呼叫

    <developer.shivam.waveview.Wave
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:amplitude="100"
        app:quadrant="0.5"
        app:speed="0.15"/>

實現原理

屬性配置

attrs.xml檔案中,進行屬性配置

<?xml version="1.0" encoding="utf-8"?>
 

<resources>
    <declare-styleable name="Wave">
        <!--波浪顏色-->
        <attr name="waveColor" format="color"/>
        <!--波浪背景顏色-->
        <attr name="waveBackgroundColor" format="color"/>
        <!--波浪速度-->
        <attr name="speed" format="float"
 
/>
        <!--正弦曲線相關-->
        <!--波浪振幅-->
        <attr name="amplitude" format="integer"/>
        <!--波浪相對於控制元件的位置-->
        <attr name="quadrant" format="float"/>
        <!--波浪的頻率-->
        <attr name="frequency" format="float"/>
    </declare-styleable
 
>
</resources>

獲取屬性,同時對屬性賦預設值

  final TypedArray array = context.obtainStyledAttributes(set, R.styleable.Wave);
        mSpeed = array.getFloat(R.styleable.Wave_speed, DEFAULT_SPEED);
        mWaveColor = array.getColor(R.styleable.Wave_waveColor, DEFAULT_WAVE_COLOR);
        mWaveBKColor = array.getColor(R.styleable.Wave_waveBackgroundColor, DEFAULT_WAVE_BK_COLOR);
        mAmplitude = array.getInt(R.styleable.Wave_amplitude, DEFAULT_AMPLITUDE);
        mQuadrant = array.getFloat(R.styleable.Wave_quadrant, DEFAULT_QUADRANT);
        mFrequency = array.getFloat(R.styleable.Wave_frequency, DEFAULT_FREQUENCY);
        array.recycle();

繪製波浪

在onDraw()中使用Canvas進行繪製即可,這裡需要注意的正弦曲線的繪製.

正弦曲線(y=Asin(ωx+φ)+k)的一些引數如下:
A——振幅，當物體作軌跡符合正弦曲線的直線往復運動時，其值為行程的1/2。
(ωx+φ)——相位，反映變數y所處的狀態。
φ——初相，x=0時的相位；反映在座標系上則為影象的左右移動。
k——偏距，反映在座標系上則為影象的上移或下移。
ω——角速度， 控制正弦週期(單位角度內震動的次數)。

onDraw中的程式碼:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    final int width = getWidth();
    final int height = getHeight();

    final int waveHeight = (int) (getHeight() * mQuadrant);
    // 繪製背景
    canvas.drawColor(mWaveBKColor);
    mWavePath.moveTo(0, height);
    mWavePath.lineTo(0, waveHeight);
    for (int i = 1; i <= width; i++) {
        // 繪製正弦曲線 y = A Sin(ωt+ ρ) = A sin(2πft + ρ)
        final float y = (float) (waveHeight + mAmplitude * Math.sin(2 * Math.PI * i * mFrequency + mShift));
        mWavePath.lineTo(i, y);
    }
    // 將曲線閉合
    mWavePath.lineTo(width, height);
    canvas.drawPath(mWavePath, mWavePaint);
}

波浪動畫

這時波浪應該已經繪製完成了,下面使用Handler中的週期任務實現動畫效果.

// 建立一個週期任務,它的職責是改變正弦曲線的偏移量
  final class WaveAnimation implements Runnable {

        @Override
        public void run() {
            mWavePath.reset();
            mShift += mSpeed;
            invalidate();
            Wave.this.postDelayed(this, DEFAULT_PERIOD);
        }
    }

在View被建立的時候讓它進行執行

// 開始波浪動畫
postDelayed(new WaveAnimation(), DEFAULT_PERIOD);

完整程式碼

public class Wave extends View {

    // 預設屬性值
    private static final int DEFAULT_AMPLITUDE = 200;
    private static final int DEFAULT_PERIOD = 16;
    private static final float DEFAULT_SPEED = .1F;
    private static final float DEFAULT_QUADRANT = .33F;
    private static final float DEFAULT_FREQUENCY = 1F / 360F;
    private static final int DEFAULT_WAVE_COLOR = Color.parseColor("#64B5F6");
    private static final int DEFAULT_WAVE_BK_COLOR = Color.parseColor("#EEEEEE");

    @SuppressWarnings("FieldCanBeLocal")
    @ColorInt
    private int mWaveColor;
    @ColorInt
    private int mWaveBKColor;
    // 振幅
    private int mAmplitude;
    // 波浪位於View的位置
    private float mQuadrant;
    // 波浪的頻率,這個值越大,波浪越密集
    private float mFrequency;

    // 速度
    private float mSpeed;
    private float mShift;

    private final Paint mWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private final Path mWavePath = new Path();



    public Wave(Context context) {
        this(context, null);
    }

    public Wave(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public Wave(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet set) {
        final TypedArray array = context.obtainStyledAttributes(set, R.styleable.Wave);
        mSpeed = array.getFloat(R.styleable.Wave_speed, DEFAULT_SPEED);
        mWaveColor = array.getColor(R.styleable.Wave_waveColor, DEFAULT_WAVE_COLOR);
        mWaveBKColor = array.getColor(R.styleable.Wave_waveBackgroundColor, DEFAULT_WAVE_BK_COLOR);
        mAmplitude = array.getInt(R.styleable.Wave_amplitude, DEFAULT_AMPLITUDE);
        mQuadrant = array.getFloat(R.styleable.Wave_quadrant, DEFAULT_QUADRANT);
        mFrequency = array.getFloat(R.styleable.Wave_frequency, DEFAULT_FREQUENCY);
        array.recycle();

        mWavePaint.setStrokeWidth(2);
        mWavePaint.setColor(mWaveColor);

        // 開始波浪動畫
        postDelayed(new WaveAnimation(), DEFAULT_PERIOD);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        final int width = getWidth();
        final int height = getHeight();

        final int waveHeight = (int) (getHeight() * mQuadrant);
        // 繪製背景
        canvas.drawColor(mWaveBKColor);
        mWavePath.moveTo(0, height);
        mWavePath.lineTo(0, waveHeight);
        for (int i = 1; i <= width; i++) {
            // 繪製正弦曲線 y = A Sin(ωt+ ρ) = A sin(2πft + ρ)
            final float y = (float) (waveHeight + mAmplitude * Math.sin(2 * Math.PI * i * mFrequency + mShift));
            mWavePath.lineTo(i, y);
        }
        // 將曲線閉合
        mWavePath.lineTo(width, height);
        canvas.drawPath(mWavePath, mWavePaint);
    }


    final class WaveAnimation implements Runnable {

        @Override
        public void run() {
            mWavePath.reset();
            mShift += mSpeed;
            invalidate();
            Wave.this.postDelayed(this, DEFAULT_PERIOD);
        }
    }
}