效果演示

代码调用与实现效果

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中的代码:

@Overrideprotected 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);        }    }}

Android(安卓)自定义View实现波浪动画