前言
扯來扯去，前面三篇自定義 View 文章，終于扯完了一些知識點，有些枯燥，所以我也是講下核心點，沒有細分析，主要是讓各位有點印象和了解。這篇終于是實踐，敲代碼的了，因為工作原因，這篇拖的比較久，不過這系列會一直更新下去的，會把我工作中用到的自定義 View 也會加上去。好了，回歸正原題，說到自定義 View ，似乎都離不開貝塞爾曲線，因此，第一篇實踐就是與貝塞爾曲線有關的。
目錄
從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 方法了。
貝塞爾曲線對應的方法演示動畫
一階曲線
(線性曲線)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 描述
voidstart()開始貝塞爾曲線（required）
voidstop()停止貝塞爾曲線（optional）
booleanaddPoint()增加控制點（optional）
booleandelPoint()刪除控制點（optional）
intgetOrder()獲取貝塞爾曲線階數（optional）
voidsetRate(int rate)設置移動速率（optional）
voidsetTangent(boolean tangent)設置是否顯示切線（optional）
voidsetLoop(boolean loop)設置是否循環（optional）
voidsetOrder(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 =newGooViewListener(this, mTvPoint) {@OverridepublicvoidonDisappear(PointF mDragCenter){super.onDisappear(mDragCenter);? ? ? ? ? ? ? ? Toast.makeText(QQMsgNotifyActivity.this,"消失了", Toast.LENGTH_SHORT).show();? ? ? ? ? ? }@OverridepublicvoidonReset(booleanisOutOfRange){super.onReset(isOutOfRange);? ? ? ? ? ? ? ? Toast.makeText(QQMsgNotifyActivity.this,"重置了", Toast.LENGTH_SHORT).show();? ? ? ? ? ? }? ? ? ? };? ? ? ? mTvPoint.setOnTouchListener(listener);
2.Viewpage頁面引導切換動畫
Github 上的項目地址：guideview
效果圖：
ViewPage引導動畫.gif
)
其實這個例子也是，運用貝塞爾曲線也就是在繪制那個圓形的地方而已，其他地方基本不怎么使用貝塞爾曲線。
