View-Draw-贝塞尔曲线-波浪

实现思路

核心要点

贝塞尔曲线的“控制点不动，数据点动”

如何模拟波浪？

1：波浪的话其实就是一条曲线
2：采用2/3阶贝塞尔曲线就可以画出来

如何模拟波浪的流动?

波浪的流动，其实就是“波浪的一个从左到右的一个平移过程”

如何平移波浪？

预先从屏幕左边线画出“一个振动周期”的波浪,然后“从左到右”慢慢改变“数据点的横坐标”就可以了

为什么要预先画“一个振动周期”的波浪?

1：波浪是由波一个接着一个产生和传播的,相邻周期内的波的形状是一样的
2：当前一个波移动一个波长之后所处的位置 正好是当前波所在上一个周期的位置，这两个波会完全重合，这样再进行后续波浪移动的时候,就可以无缝衔接起来

平移的距离是多少？

一个波长的距离

如何实现波浪的循环往复的运动？

只需要完成波在一个“振动周期”内的移动就行,然后无限循环此过程

---

参考

https://www.gcssloop.com/customview/Path_Bezier
https://www.jianshu.com/p/55c721887568
https://baike.baidu.com/item/%E6%B3%A2%E9%95%BF/829184

---

效果图

imge

---

实现

public class WaveView extends View {
    //波浪个数
    private int mWaveCount = 1;
    //波长
    private int mWaveLength;
    //波浪的高度
    private int mWaveHeight = 70;
    //"数据"点的纵坐标
    private int mStartY;
    //偏移量,就是"预先从屏幕左边线画出"一个振动周期"的波浪"这个波浪的起始点
    private int mOffset;
    //是否开启了动画
    private boolean isStartAniFlag;

    private Path mWavePath = new Path();
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        init();
    }

    private void init() {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.LTGRAY);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mStartY = h / 2;
        mWaveLength = w / mWaveCount;
        mOffset = -mWaveLength;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //重置path
        mWavePath.reset();
        //画波浪
        drawWave(canvas);
        //通过lineTo()、close()构造从波浪到屏幕底部的封闭图形
        mWavePath.lineTo(getWidth(), getHeight());
        mWavePath.lineTo(0, getHeight());
        mWavePath.close();
        //
        canvas.drawPath(mWavePath, mPaint);
    }

    private void drawWave(Canvas canvas) {
        mWavePath.moveTo(isStartAniFlag ? mOffset : 0, mStartY);

        if (isStartAniFlag) {
            drawMoveWave(canvas);
        } else {
            drawUnMoveWave(canvas);
        }
    }

    private void drawMoveWave(Canvas canvas) {
        int waveCount = mWaveCount + 1;
        for (int i = 0; i < waveCount; i++) {
            mWavePath.quadTo(mOffset + mWaveLength / 4, mStartY - mWaveHeight,
                    mOffset + mWaveLength / 2, mStartY);

            mWavePath.quadTo(mOffset + mWaveLength * 3 / 4, mStartY + mWaveHeight,
                    mOffset + mWaveLength, mStartY);

            mOffset += mWaveLength;
        }
    }

    private void drawUnMoveWave(Canvas canvas) {
        int offset = 0;
        for (int i = 0; i < mWaveCount; i++) {
            mWavePath.quadTo(offset + mWaveLength / 4, mStartY - mWaveHeight,
                    offset + mWaveLength / 2, mStartY);

            mWavePath.quadTo(offset + mWaveLength * 3 / 4, mStartY + mWaveHeight,
                    offset + mWaveLength, mStartY);

            offset += mWaveLength;
        }
    }

    public void setOffset(int offset) {
        mOffset = offset;
        postInvalidateOnAnimation();
    }

    public int getOffset() {
        return mOffset;
    }

    public void startAni() {
        ObjectAnimator animator = ObjectAnimator.ofInt(this, "offset", -mWaveLength, 0);
        animator.setRepeatMode(ValueAnimator.RESTART);
        //设置restart模式的话,还需要设置repeatCount才会重复执行动画
        animator.setRepeatCount(Animation.INFINITE);
        animator.setDuration(1000);
        animator.setInterpolator(new LinearInterpolator());
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isStartAniFlag = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isStartAniFlag = false;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                isStartAniFlag = false;
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.start();
    }
}