根據(jù)正弦：y=Asin(ωx+φ)+h 畫出靜態(tài)的曲線困介。
再通過(guò)改變相位：ωx+φ，來(lái)實(shí)現(xiàn)動(dòng)畫田篇。

靜態(tài)圖.png

/**
 * @ClassName WaveView
 * @Description TODO
 * @Author shufeng.jiang
 * @Date 2022/4/20 14:06
 */
public class WaveView extends View {
    /**
     *  y=Asin(ωx+φ)+h 周期:T=2π/ω

     */
  
    /* 畫筆 */
    Paint paint1  = new Paint();
    public WaveView(Context context) {
        super(context);
    }

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

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }
    /* 控件寬 */
    float xAxis=0;
    /* 控件高 */
    float yAxis=0;
    /* 正弦函數(shù)的周期 */
    float mCycle=0;
    /* 曲線下移的距離 */
    float wavelevel=0;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        xAxis = getWidth();      // 控件的寬
        yAxis = getHeight() ;    // 控件的高
        wavelevel = yAxis/2;    // wavelevel 為 y=Asin(ωx+φ)+h 的 h
        mCycle = (float) (2 * Math.PI / xAxis/1.5); // 根據(jù)寬度計(jì)算三角函數(shù)周期
        waveAnim();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        createShader(canvas);
    }
    float startXAxis=0;
    private void createShader(Canvas canvas){
        for(int i=0;i<xAxis;i++){
            float startYAxis =  (float) (100*Math.sin(mCycle*i+startXAxis)+wavelevel);
            float endYAxis = (float) (100*Math.sin(mCycle*(i+1)+startXAxis)+wavelevel);
          
           //  canvas.drawLine(i,  startYAxis, i+1,  endYAxis , paint1);    // 這樣是繪制正弦曲線

            canvas.drawLine(i,  startYAxis, i+1,  yAxis, paint1);    // 這樣將繪制正弦曲線以下的部分。
        }
    }

    private void initPaint(){
        paint1.setColor(Color.BLUE);    // 設(shè)置畫筆顏色
        paint1.setStrokeWidth(4.0f);      // 設(shè)置畫筆寬度
        paint1.setAntiAlias(true);       // 是否抗鋸齒

       /** Paint.Style.STROKE 只繪制圖形輪廓（描邊） 
         *Paint.Style.FILL 只繪制圖形內(nèi)容 
         *Paint.Style.FILL_AND_STROKE 既繪制輪廓也繪制內(nèi)容
       */
        paint1.setStyle(Paint.Style.STROKE);      
    }
    public void waveAnim() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0F, 1.0f);
        valueAnimator.setDuration(110000);
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Float aFloat = Float.valueOf(animation.getAnimatedValue().toString());
                //核心代碼,重要的是在動(dòng)畫的過(guò)程中改變正弦波的相位,從 0 到 控件寬 無(wú)限變化就可以實(shí)現(xiàn)正弦波的移動(dòng)
                startXAxis = getWidth() * aFloat;
                invalidate();
            }
        });
        valueAnimator.start();
    }

}

到次繪制完成蜜唾！
第一次自定義View杂曲，各位大佬勿噴。目前寫簡(jiǎn)書(shū)的意義就是做筆記袁余，方便自己后期借鑒擎勘。