贝塞尔曲线学习【1】

今天学习了贝塞尔曲线的相关内容
特别感谢 http://blog.csdn.net/z82367825/article/details/51599245 博文。
具体的理论知识就不写了。
在此处记录下 修改过的 波浪图（由原来的一条增加为3条交替变化）。如下图所示。具体实现可以参考上面的文章。

这里是绘制了三条贝塞尔曲线组合而成的效果。代码如下：

package com.zero.bezier.widget.wave;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PointF;import android.graphics.Shader;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.view.View;import android.view.animation.Animation;import android.view.animation.LinearInterpolator;public class WaveView extends View {    /**     * 波峰     */    private float mWavePeak = 35f;    /**     * 波槽     */    private float mWaveTrough = 35f;    /**     * 水位     */    private float mWaveHeight = 350f;    private Paint mPaintWave1;    private Path mPathWave1;    private int mWaterColorWave1 = 0x990000FF;    private Paint mPaintWave2;    private Path mPathWave2;    private int mWaterColorWave2 = 0x550000FF;    private Paint mPaintWave3;    private Path mPathWave3;    private int mWaterColorWave3 = 0x220000FF;    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    public WaveView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public WaveView(Context context) {        super(context);        init();    }    private void init() {        mPathWave1 = new Path();        mPaintWave1 = new Paint();        mPaintWave1.setAntiAlias(true);        //mPaintWave1.setStyle(Paint.Style.FILL);        //mPaintWave1.setColor(mWaterColorWave1);        //mPaintWave1.setColor(getResources().getColor(android.R.color.holo_blue_bright));        mPathWave2 = new Path();        mPaintWave2 = new Paint();        mPaintWave2.setAntiAlias(true);        mPaintWave2.setStyle(Paint.Style.FILL);        mPaintWave2.setColor(mWaterColorWave2);        //mPaintWave2.setColor(getResources().getColor(android.R.color.holo_red_light));        mPathWave3 = new Path();        mPaintWave3 = new Paint();        mPaintWave3.setAntiAlias(true);        mPaintWave3.setStyle(Paint.Style.FILL);        mPaintWave3.setColor(mWaterColorWave3);        //mPaintWave3.setColor(getResources().getColor(android.R.color.holo_green_light));        LinearGradient linearGradient = new LinearGradient(                0,                0,                720,                720,                mWaterColorWave1,                mWaterColorWave3,                Shader.TileMode.CLAMP);        mPaintWave1.setShader(linearGradient);    }    private float mWidth, mHeight;    private PointF mWave1Start;    private PointF mWave1Left1, mWave1Left2, mWave1First, mWave1Second, mWave1Right;    private PointF mWave1ControlLeft1, mWave1ControlLeft2, mWave1ControlFirst, mWave1ControlSecond;    private PointF mWave2Start;    private PointF mWave2Left1, mWave2Left2, mWave2First, mWave2Second, mWave2Right;    private PointF mWave2ControlLeft1, mWave2ControlLeft2, mWave2ControlFirst, mWave2ControlSecond;    private PointF mWave3Start;    private PointF mWave3Left1, mWave3Left2, mWave3First, mWave3Second, mWave3Right;    private PointF mWave3ControlLeft1, mWave3ControlLeft2, mWave3ControlFirst, mWave3ControlSecond;    private boolean mIsRunning = false;    private boolean mHasInit = false;    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        if (!mHasInit) {            mWidth = w;            mHeight = h;            mHasInit = true;        }        super.onSizeChanged(w, h, oldw, oldh);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (!mIsRunning || !mHasInit)            return;        mPathWave1.reset();        mPathWave1.moveTo(mWave1Left1.x, mWave1Left1.y);        mPathWave1.quadTo(mWave1ControlLeft1.x, mWave1ControlLeft1.y, mWave1Left2.x, mWave1Left2.y);        mPathWave1.quadTo(mWave1ControlLeft2.x, mWave1ControlLeft2.y, mWave1First.x, mWave1First.y);        mPathWave1.quadTo(mWave1ControlFirst.x, mWave1ControlFirst.y, mWave1Second.x, mWave1Second.y);        mPathWave1.quadTo(mWave1ControlSecond.x, mWave1ControlSecond.y, mWave1Right.x, mWave1Right.y);        mPathWave1.lineTo(mWave1Right.x, mHeight);        mPathWave1.lineTo(mWave1Left1.x, mHeight);        mPathWave1.lineTo(mWave1Left1.x, mWave1Left1.y);        canvas.drawPath(mPathWave1, mPaintWave1);        mPathWave2.reset();        mPathWave2.moveTo(mWave2Left1.x, mWave2Left1.y);        mPathWave2.quadTo(mWave2ControlLeft1.x, mWave2ControlLeft1.y, mWave2Left2.x, mWave2Left2.y);        mPathWave2.quadTo(mWave2ControlLeft2.x, mWave2ControlLeft2.y, mWave2First.x, mWave2First.y);        mPathWave2.quadTo(mWave2ControlFirst.x, mWave2ControlFirst.y, mWave2Second.x, mWave2Second.y);        mPathWave2.quadTo(mWave2ControlSecond.x, mWave2ControlSecond.y, mWave2Right.x, mWave2Right.y);        mPathWave2.lineTo(mWave2Right.x, mHeight);        mPathWave2.lineTo(mWave2Left1.x, mHeight);        mPathWave2.lineTo(mWave2Left1.x, mWave2Left1.y);        canvas.drawPath(mPathWave2, mPaintWave2);        mPathWave3.reset();        mPathWave3.moveTo(mWave3Left1.x, mWave3Left1.y);        mPathWave3.quadTo(mWave3ControlLeft1.x, mWave3ControlLeft1.y, mWave3Left2.x, mWave3Left2.y);        mPathWave3.quadTo(mWave3ControlLeft2.x, mWave3ControlLeft2.y, mWave3First.x, mWave3First.y);        mPathWave3.quadTo(mWave3ControlFirst.x, mWave3ControlFirst.y, mWave3Second.x, mWave3Second.y);        mPathWave3.quadTo(mWave3ControlSecond.x, mWave3ControlSecond.y, mWave3Right.x, mWave3Right.y);        mPathWave3.lineTo(mWave3Right.x, mHeight);        mPathWave3.lineTo(mWave3Left1.x, mHeight);        mPathWave3.lineTo(mWave3Left1.x, mWave3Left1.y);        canvas.drawPath(mPathWave3, mPaintWave3);    }    private void reset() {        mWave1Start = new PointF(-mWidth, mHeight - mWaveHeight);        mWave1Left1 = new PointF(-mWidth, mHeight - mWaveHeight);        mWave1Left2 = new PointF(-mWidth / 2f, mHeight - mWaveHeight);        mWave1First = new PointF(0, mHeight - mWaveHeight);        mWave1Second = new PointF(mWidth / 2f, mHeight - mWaveHeight);        mWave1Right = new PointF(mWidth, mHeight - mWaveHeight);        mWave1ControlLeft1 = new PointF(mWave1Left1.x + mWidth / 4f, mWave1Left1.y + mWavePeak);        mWave1ControlLeft2 = new PointF(mWave1Left2.x + mWidth / 4f, mWave1Left2.y - mWaveTrough);        mWave1ControlFirst = new PointF(mWave1First.x + mWidth / 4f, mWave1First.y + mWavePeak);        mWave1ControlSecond = new PointF(mWave1Second.x + mWidth / 4f, mWave1Second.y - mWaveTrough);        mWave2Start = new PointF(-mWidth, mHeight - mWaveHeight);        mWave2Left1 = new PointF(-mWidth, mHeight - mWaveHeight);        mWave2Left2 = new PointF(-mWidth / 2f, mHeight - mWaveHeight);        mWave2First = new PointF(0, mHeight - mWaveHeight);        mWave2Second = new PointF(mWidth / 2f, mHeight - mWaveHeight);        mWave2Right = new PointF(mWidth, mHeight - mWaveHeight);        mWave2ControlLeft1 = new PointF(mWave2Left1.x + mWidth / 4f, mWave2Left1.y + mWavePeak);        mWave2ControlLeft2 = new PointF(mWave2Left2.x + mWidth / 4f, mWave2Left2.y - mWaveTrough);        mWave2ControlFirst = new PointF(mWave2First.x + mWidth / 4f, mWave2First.y + mWavePeak);        mWave2ControlSecond = new PointF(mWave2Second.x + mWidth / 4f, mWave2Second.y - mWaveTrough);        mWave3Start = new PointF(-mWidth, mHeight - mWaveHeight);        mWave3Left1 = new PointF(-mWidth, mHeight - mWaveHeight);        mWave3Left2 = new PointF(-mWidth / 2f, mHeight - mWaveHeight);        mWave3First = new PointF(0, mHeight - mWaveHeight);        mWave3Second = new PointF(mWidth / 2f, mHeight - mWaveHeight);        mWave3Right = new PointF(mWidth, mHeight - mWaveHeight);        mWave3ControlLeft1 = new PointF(mWave3Left1.x + mWidth / 4f, mWave3Left1.y + mWavePeak);        mWave3ControlLeft2 = new PointF(mWave3Left2.x + mWidth / 4f, mWave3Left2.y - mWaveTrough);        mWave3ControlFirst = new PointF(mWave3First.x + mWidth / 4f, mWave3First.y + mWavePeak);        mWave3ControlSecond = new PointF(mWave3Second.x + mWidth / 4f, mWave3Second.y - mWaveTrough);    }    private class WaveHandler extends Handler {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            if (msg.what == ANIM_START) {                reset();                startAnimWave1();                startAnimWave2();                startAnimWave3();                mIsRunning = true;            }        }    }    private WaveHandler mWaveHandler = new WaveHandler();    private static final int ANIM_START = 1;    public void setRunning() {        new Thread(new Runnable() {            @Override            public void run() {                while (!mHasInit) {                    try {                        Thread.sleep(50);                    } catch (InterruptedException e) {                        e.printStackTrace();                    }                }                mWaveHandler.sendEmptyMessage(ANIM_START);            }        }).start();    }    private void startAnimWave1() {        ValueAnimator valueAnimator = ValueAnimator.ofFloat(mWave1Start.x, 0);        valueAnimator.setInterpolator(new LinearInterpolator());        valueAnimator.setDuration(3000);        valueAnimator.setRepeatCount(Animation.INFINITE);        //动画效果重复//        valueAnimator.setRepeatMode(Animation.RESTART);        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mWave1Left1.x = (float) animation.getAnimatedValue();                mWave1Left2 = new PointF(mWave1Left1.x + mWidth / 2f, mHeight - mWaveHeight);                mWave1First = new PointF(mWave1Left2.x + mWidth / 2f, mHeight - mWaveHeight);                mWave1Second = new PointF(mWave1First.x + mWidth / 2f, mHeight - mWaveHeight);                mWave1Right = new PointF(mWave1Second.x + mWidth / 2f, mHeight - mWaveHeight);                mWave1ControlLeft1 = new PointF(mWave1Left1.x + mWidth / 4f, mWave1Left1.y + mWavePeak);                mWave1ControlLeft2 = new PointF(mWave1Left2.x + mWidth / 4f, mWave1Left2.y - mWaveTrough);                mWave1ControlFirst = new PointF(mWave1First.x + mWidth / 4f, mWave1First.y + mWavePeak);                mWave1ControlSecond = new PointF(mWave1Second.x + mWidth / 4f, mWave1Second.y - mWaveTrough);                invalidate();            }        });        valueAnimator.start();    }    private void startAnimWave2() {        ValueAnimator valueAnimator1 = ValueAnimator.ofFloat(mWave2Start.x, 0);        valueAnimator1.setInterpolator(new LinearInterpolator());        valueAnimator1.setDuration(3000);        valueAnimator1.setRepeatCount(Animation.INFINITE);        valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mWave2Left1.x = (float) animation.getAnimatedValue();                mWave2Left2 = new PointF(mWave2Left1.x + mWidth / 2f, mHeight - mWaveHeight);                mWave2First = new PointF(mWave2Left2.x + mWidth / 2f, mHeight - mWaveHeight);                mWave2Second = new PointF(mWave2First.x + mWidth / 2f, mHeight - mWaveHeight);                mWave2Right = new PointF(mWave2Second.x + mWidth / 2f, mHeight - mWaveHeight);                mWave2ControlLeft1 = new PointF(mWave2Left1.x + mWidth / 4f, mWave2Left1.y + mWavePeak);                mWave2ControlLeft2 = new PointF(mWave2Left2.x + mWidth / 4f, mWave2Left2.y - mWaveTrough);                mWave2ControlFirst = new PointF(mWave2First.x + mWidth / 4f, mWave2First.y + mWavePeak);                mWave2ControlSecond = new PointF(mWave2Second.x + mWidth / 4f, mWave2Second.y - mWaveTrough);                invalidate();            }        });        valueAnimator1.setStartDelay(-1800);        valueAnimator1.start();    }    private void startAnimWave3() {        ValueAnimator valueAnimator1 = ValueAnimator.ofFloat(mWave3Start.x, 0);        valueAnimator1.setInterpolator(new LinearInterpolator());        valueAnimator1.setDuration(3000);        valueAnimator1.setRepeatCount(Animation.INFINITE);        valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mWave3Left1.x = (float) animation.getAnimatedValue();                mWave3Left2 = new PointF(mWave3Left1.x + mWidth / 2f, mHeight - mWaveHeight);                mWave3First = new PointF(mWave3Left2.x + mWidth / 2f, mHeight - mWaveHeight);                mWave3Second = new PointF(mWave3First.x + mWidth / 2f, mHeight - mWaveHeight);                mWave3Right = new PointF(mWave3Second.x + mWidth / 2f, mHeight - mWaveHeight);                mWave3ControlLeft1 = new PointF(mWave3Left1.x + mWidth / 4f, mWave3Left1.y + mWavePeak);                mWave3ControlLeft2 = new PointF(mWave3Left2.x + mWidth / 4f, mWave3Left2.y - mWaveTrough);                mWave3ControlFirst = new PointF(mWave3First.x + mWidth / 4f, mWave3First.y + mWavePeak);                mWave3ControlSecond = new PointF(mWave3Second.x + mWidth / 4f, mWave3Second.y - mWaveTrough);                invalidate();            }        });        valueAnimator1.setStartDelay(-800);        valueAnimator1.start();    }}

此处只记录下自己探索的内容：
1、由一条曲线扩充为多条，是开了多个ValueAnimator来invalidate()视图。
2、为了制造视差，在另外两条曲线的ValueAnimator实例中设定了.setStartDelay()值，使动画的发生值滞后（如果设定正值）或者提前（如果设定负值）。此处，设定了负值，即相位提前，避免在第一个曲线动画开始后，其他曲线存在滞后显示的情况
3、绘制path时，替代使用solid颜色，而是使用gradient实现渐变色
4、下面要探索下，是否 可以只使用一个ValueAnimator即可实现多个贝塞尔曲线交叠显示