Android自定義View之貝塞爾曲線

目錄（注：特別感謝原作者：來自簡書的fuck兩點水）

從0到1Android自定義View（四） 貝塞爾曲線.png

一、貝塞爾曲線

1、貝塞爾曲線簡介

來看看官方對神奇的賽貝爾曲線的介紹：貝塞爾曲線於 1962，由法國工程師皮埃爾·貝塞爾所廣泛發表，他運用貝塞爾曲線來爲汽車的主體進行設計。貝塞爾曲線最初由 Paul de Casteljau 於 1959 年運用 de Casteljau 演算法開發，以穩定數值的方法求出貝茲曲線。貝塞爾曲線主要用於二維圖形應用程序中的數學曲線，曲線由起始點，終止點（也稱錨點）和控制點組成，通過調整控制點，貝塞爾曲線的形狀會發生變化。

看完後是不是一臉矇蔽，一句話理解貝塞爾曲線就是：將任意一條曲線轉化爲精確的數學公式。

2、賽貝爾曲線公式

竟然說了是將曲線轉化爲精確的數學公式，那麼我們來看下具體的數學公式（ 注：以下公式中，B(t) 爲 t 時間下點的座標； P0 爲起點,Pn 爲終點,Pi 爲控制點 ）：

(1) 一階貝塞爾曲線(線段)

由 P0 至 P1 的連續點， 描述的一條線段

一階貝塞爾曲線公式.jpg

一階貝塞爾曲線公式圖.jpg

(2) 二階貝塞爾曲線(拋物線)：

由 P0 至 P1 的連續點 Q0，描述一條線段。

由 P1 至 P2 的連續點 Q1，描述一條線段。

由 Q0 至 Q1 的連續點 B(t)，描述一條二次貝塞爾曲線。

二階貝塞爾曲線(拋物線)公式.jpg

二階貝塞爾曲線(拋物線)公式圖.jpg

(3) 三階貝塞爾曲線：

三階貝塞爾曲線公式.jpg

三階貝塞爾曲線公式圖.jpg

3、貝塞爾曲線在 Android 中的應用

其實貝塞爾曲線在 Android 自定義 View 中運用還是挺多的，比如

• Android 5.0 後下拉刷新的陰影曲線
• QQ 消息提醒的小紅點
• 用於左右滑動時顯示個數的點的移動動畫
• 水流波動效果
• 一個彈性效果的抽屜菜單

4、Android Path 類中提供貝塞爾曲線的操作方法

在 Android 開發中，要實現貝塞爾曲線其實還是很簡單的，因爲 Android 已經給我們提供了相關接口，此接口方法在 Path 類中，而關於 Path 類的講解，前面一篇博客就介紹過了。而且通過 Android 的 API 可以知道，貝塞爾曲線從 API1 就開始支持了。下面就是賽貝爾曲線對應的 API 方法了。

貝塞爾曲線	對應的方法	演示動畫
一階曲線 <br/> (線性曲線)	lineTo	一階貝塞爾曲線動圖.gif
二階曲線	quadTo	二階貝塞爾曲線(拋物線)動圖.gif
三階曲線	cubicTo	三階貝塞爾曲線動圖.gif
四階曲線	無	四階貝塞爾曲線動圖.gif

5、通過 de Casteljau 算法繪製貝塞爾曲線

上面提過，Path 類中提供了畫一到三階的貝塞爾曲線的方法，如果我們需要繪製更高階的貝塞爾曲線呢？我們可以採用德卡斯特里奧算法（De Casteljau’s Algorithm）來實現貝塞爾曲線。

效果圖：

貝塞爾曲線截屏1.gif

貝塞爾曲線截屏2.gif

貝塞爾曲線截屏3.gif

貝塞爾曲線截屏4.gif

Github 上的代碼：beziercurve

裏面主要就一個類，beziercurve ，這是個自定義 View ，BezierCurve 裏面主要提供了以下的方法：

Methods:

method 方法	description 描述
void start()	開始貝塞爾曲線（required）
void stop()	停止貝塞爾曲線（optional）
boolean addPoint()	增加控制點（optional）
boolean delPoint()	刪除控制點（optional）
int getOrder()	獲取貝塞爾曲線階數（optional）
void setRate(int rate)	設置移動速率（optional）
void setTangent(boolean tangent)	設置是否顯示切線（optional）
void setLoop(boolean loop)	設置是否循環（optional）
void setOrder(int order)	設置貝塞爾曲線階數（optional）

最後通過 BezierCurveActivity 來展示。

二、貝塞爾曲線的應用

1.QQ 消息提醒可拖拽紅點

Github 上的項目地址：qqmsgnotify

效果圖：

QQ消息提醒紅點.gif

主要是在繪製紅點的時候運用了貝塞爾曲線，在固定的位置中，拖拽的時候，有一種粘性的效果，就是這裏運用了貝塞爾曲線。

QQ消息提醒紅點.png

運用：

(1) 在對應的位置創建一個 TextView
(2) 設置 GooViewListener 監聽事件就可以了

 mTvPoint = (TextView) findViewById(R.id.point_conversation);
        mTvPoint.setText("10");
        mTvPoint.setTag(10);
        GooViewListener listener = new GooViewListener(this, mTvPoint) {
            @Override
            public void onDisappear(PointF mDragCenter) {
                super.onDisappear(mDragCenter);
                Toast.makeText(QQMsgNotifyActivity.this, "消失了", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onReset(boolean isOutOfRange) {
                super.onReset(isOutOfRange);
                Toast.makeText(QQMsgNotifyActivity.this, "重置了", Toast.LENGTH_SHORT).show();
            }
        };
        mTvPoint.setOnTouchListener(listener);

2.Viewpage頁面引導切換動畫

Github 上的項目地址：guideview

效果圖：

ViewPage引導動畫.gif

其實這個例子也是，運用貝塞爾曲線也就是在繪製那個圓形的地方而已，其他地方基本不怎麼使用貝塞爾曲線。