前言：貝塞爾曲線分為一級曲線，二級曲線，三級曲線和多級曲線，利用貝塞爾曲線可以做出很多有意思的動畫和圖形，今天我們就來實現一個比較簡單的波浪線。

-----------------分割線---------------

初步認識貝塞爾曲線：

mPath.moveTo：設定起點。

mPath.rQuadTo：繪製曲線。

注意：第二個mPath.rQuadTo相對於自己的起始點--也即是上一個曲線的終點。

mPath.lineTo：閉合。

我們也可以使用path.quadTo(x1, y1, x2, y2)繪製二級貝塞爾曲線。

ok看完整程式碼：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.view.View;

/**
 * Created by Fly on 2017/6/14.
 */

public class MyView extends View {

    Paint mPaint;
    Path mPath;

    public MyView(Context context) {
        super(context);
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(10);
        mPath = new Path();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.moveTo(100, 400);
        mPath.rQuadTo(100, -150, 200, 0);
        mPath.rQuadTo(100, 150, 200, 0);
        mPath.lineTo(100, 400);
        canvas.drawPath(mPath, mPaint);
    }
}
 

---------------分割線---------------

如果想畫動態的波浪線，需要我們不斷的改變起點，廢話不說直接看程式碼：

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

import java.util.Random;

/**
 * Created by Fly on 2017/6/13.
 */

public class WaveView2 extends View {

    private Paint mPaint;
    private Path mPath;
    private int mWaveLength = 100;
    private int dx;
    private int dy;

    public WaveView2(Context context) {
        super(context);
        init();
    }

    public WaveView2(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(10);
        mPath = new Path();
    }

    int s = 50;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        int originY = 300;
        int mWaveHalfLength = mWaveLength / 2;
        mPath.moveTo(-mWaveLength + dx, originY);

        int max = 60;
        int min = 40;
        int maxW = 120;
        int minW = 80;
        Random random = new Random();
        try {
            Thread.sleep(500);
            s = random.nextInt(max) % (max - min + 1) + min;
            mWaveLength = random.nextInt(maxW) % (maxW - minW + 1) + minW;
        } catch (InterruptedException e) {
            e.printStackTrace();
        }


        //螢幕的寬度裡面放多少個波長
        for (int i = -mWaveLength; i < getWidth() + mWaveLength; i += mWaveLength) {
            //相對繪製二階貝塞爾曲線(相對於自己的起始點--也即是上一個曲線的終點  的距離dx1)
            mPath.rQuadTo(mWaveHalfLength / 2, -s, mWaveHalfLength, 0);
            mPath.rQuadTo(mWaveHalfLength / 2, s, mWaveHalfLength, 0);
            //			path.quadTo(x1, y1, x2, y2)
        }
        //顏色填充
        //畫一個封閉的空間
//        mPath.lineTo(getWidth(), getHeight());
//        mPath.lineTo(0, getHeight());
//        mPath.close();

        canvas.drawPath(mPath, mPaint);
    }

    public void startAnimation() {
        ValueAnimator animator = ValueAnimator.ofInt(0, mWaveLength);
        animator.setDuration(1000);
        animator.setInterpolator(new LinearInterpolator());
        //無限迴圈
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                dx = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }
}
 

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WaveView2 waveView = (WaveView2) findViewById(R.id.wv);
        waveView.startAnimation();
    }
}
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <com.fly.lsn35_waveview.WaveView2
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

---------------------完-----------------