姓名：唐來賓? 學號：17101223417
轉載http://mp.weixin.qq.com/s/-jUIIcdnx-BBPgb5AGnbEA
【嵌牛導讀】相信很多同學都知道“貝塞爾曲線”這個詞职抡，我們在很多地方都能經(jīng)称湔希看到叉瘩。利用“貝塞爾曲線”可以做出很多好看的UI效果只估，本篇博客就讓我們一起學習“貝塞爾曲線”。
【嵌牛鼻子】Android 貝塞爾曲線
【嵌牛鼻子】如何畫貝塞爾曲線？
【嵌牛正文】
相信很多同學都知道“貝塞爾曲線”這個詞税手，我們在很多地方都能經(jīng)忱党看到。利用“貝塞爾曲線”可以做出很多好看的UI效果宋欺，本篇博客就讓我們一起學習“貝塞爾曲線”轰豆。
1
貝塞爾曲線的原理
貝塞爾曲線是用一系列點來控制曲線狀態(tài)的，這些點簡單分為兩類：
類型作用
數(shù)據(jù)點確定曲線的起始和結束位置
控制點確定曲線的彎曲程度
一階貝塞爾曲線
一階曲線是沒有控制點的齿诞，僅有兩個數(shù)據(jù)點(A 和 B)酸休，最終效果一個線段。
動態(tài)過程可以參照下圖(貝塞爾曲線相關的動態(tài)演示圖片來自維基百科)祷杈。
一階曲線其實就是lineTo方法斑司。
二階貝塞爾曲線
在平面內(nèi)任選 3 個不共線的點，依次用線段連接但汞。
在第一條線段上任選一個點 D宿刮。計算該點到線段起點的距離 AD，與該線段總長 AB 的比例私蕾。
連接這兩點 DE僵缺。
從新的線段 DE 上再次找出相同比例的點 F，使得 DF:DE = AD:AB = BE:BC踩叭。
到這里磕潮，我們就確定了貝塞爾曲線上的一個點 F。接下來容贝，請稍微回想一下中學所學的極限知識自脯，讓選取的點 D 在第一條線段上從起點 A 移動到終點 B，找出所有的貝塞爾曲線上的點 F嗤疯。所有的點找出來之后冤今，我們也得到了這條貝塞爾曲線。
動態(tài)過程如下：
三階貝塞爾曲線
控制點個數(shù)為 4 時茂缚，就是三階的曲線
步驟都是相同的戏罢，只不過我們每確定一個貝塞爾曲線上的點屋谭，要進行三輪取點操作。如圖龟糕，AE:AB = BF:BC = CG:CD = EH:EF = FI:FG = HJ:HI桐磁，其中點 J 就是最終得到的貝塞爾曲線上的一個點。
這樣我們得到的是一條三次貝塞爾曲線讲岁。
動態(tài)圖如下:
三階曲線對應的方法是cubicTo
要繪制更復雜的曲線我擂，控制點的增加也僅僅是線性的。這一特點使其不光在工業(yè)設計領域大展拳腳缓艳，就連數(shù)學基礎不好的人也可以比較容易地掌握校摩，比如大多數(shù)平面美術設計師們。
2
學習貝塞爾曲線函數(shù)
一階曲線是一條線段阶淘，非常簡單衙吩，不再進行介紹，都是path的基本用法溪窒。
二階曲線：
首先坤塞，兩個數(shù)據(jù)點是控制貝塞爾曲線開始和結束的位置，而控制點則是控制貝塞爾的彎曲狀態(tài)
從上面的動態(tài)圖可以看出澈蚌，貝塞爾曲線在動態(tài)變化過程中有類似于橡皮筋一樣的彈性效果摹芙，因此在制作一些彈性效果的時候很常用。
代碼如下：
三階曲線：
三階曲線由兩個數(shù)據(jù)點和兩個控制點來控制曲線狀態(tài)宛瞄。
三階曲線相比于二階曲線可以制作更加復雜的形狀浮禾，但是對于高階的曲線，用低階的曲線組合也可達到相同的效果坛悉，就是傳說中的降階伐厌。因此我們對貝塞爾曲線的封裝方法一般最高只到三階曲線。
降階與升階
類型釋義變化
降階在保持曲線形狀與方向不變的情況下裸影，減少控制點數(shù)量，即降低曲線階數(shù)方法變得簡單军熏，數(shù)據(jù)點變多轩猩，控制點可能減少，靈活性變?nèi)?/p>
升階在保持曲線形狀與方向不變的情況下荡澎，增加控制點數(shù)量均践，即升高曲線階數(shù)方法更加復雜，數(shù)據(jù)點不變摩幔，控制點增加彤委，靈活性變強
3
貝塞爾曲線實例
一般使用貝塞爾曲線的情況如下：
至于只需要一個靜態(tài)的曲線圖形的情況，用圖片豈不是更好或衡，大量的計算會很不劃算焦影。
如果是顯示SVG矢量圖的話车遂，已經(jīng)有相關的解析工具了(內(nèi)部依舊運用的有貝塞爾曲線)，不需要手動計算斯辰。
貝塞爾曲線的主要優(yōu)點是可以實時控制曲線狀態(tài)舶担，并可以通過改變控制點的狀態(tài)實時讓曲線進行平滑的狀態(tài)變化。
4
QQ紅點的實現(xiàn)效果
qq的紅點去除效果彬呻，其實就是用了兩條貝塞爾曲線衣陶。
基本理論：只要在拖動的時候 去改變輔助點的Y，和固定圓的半徑闸氮， 就可以出來效果剪况。
創(chuàng)建畫筆
繪制動圓和固定圓
獲取兩個圓之間的距離:
onDraw（）方法繪制圓
處理onTouch（）方法，讓紅點隨手勢動起來
修改onDraw（）判斷
isOutToRange和isDisappear分別為true和false的情況
5
漂浮的心
漂浮軌跡就是一條三階貝塞爾曲線蒲跨，結合屬性動畫中的估值器進行設置拯欧。
首先定義一個屬性動畫的估值器
之后自定義一個view可以生成愛心，添加透明度财骨，縮放等動畫和根據(jù)貝塞爾曲線改變其位置的屬性動畫镐作。
初始化愛心圖片和多個插值器等，到時隨即選取
入場動畫
貝塞爾曲線動畫
結合動畫添加愛心
6
彈性的圓
還有一個實例隆箩，就是特別出名的彈性的圓
將這個圓的動畫效果拆解開看的畫该贾，可以分為5個狀態(tài)。
這里寫圖片描述
這個動畫效果的實現(xiàn)就是不同狀態(tài)之間的轉化加上水平位移的實現(xiàn)捌臊。
我們需要先了解一下如何用貝塞爾曲線畫一個圓杨蛋，因為我的做法是通過貝塞爾曲線來實現(xiàn)的。
就是所需要的數(shù)值c約等于0.551915024494f理澎，具體可以參考這篇文章逞力，http://spencermortensen.com/articles/bezier-circle/，那么這個c的值的作用糠爬，就是把圖中的1理解為圓的半徑寇荧，那么對應的另外個值就應該是半徑乘以0.551915024494f。
坐標軸也就是Android中的坐標軸了执隧，如果我們打算用貝塞爾曲線來畫這么一個圓的話揩抡，我們需要知道這個圓的半徑，以及圖中的M的值镀琉，知道這兩個值的話就能夠知道圖中12個點的坐標峦嗤，知道坐標就能夠用Path的cubicTo方法來使用貝塞爾曲線畫出圓了。
這樣我們就知道如何使用貝塞爾曲線來繪制一個圓了屋摔。也就是狀態(tài)1和狀態(tài)5我們都會繪制了烁设，接下來看看狀態(tài)2如何繪制。
狀態(tài)2其實就是把右邊的點向右移動點距離
狀態(tài)3的實現(xiàn)就是在狀態(tài)2的基礎上修改了個值钓试，一個是M的值加大装黑，讓圓看起來跟肥一點副瀑，還有就是圈住的那些點向右移動，做到居中曹体。
實現(xiàn)如下：
來自：CSDN-伯努力不努力
