一,、甚忙，短言之

最近谷歌那誰誰因為自己的相好被老大搶了,，就去小米了,！狗血的三角關(guān)系要比爛掉的TVB神劇好看多了。

但這只是小菜,，貝塞爾曲線才是很角色,，因為有外國血統(tǒng)，因此,，和CSS3動畫,、SVG以及canvas都有基情，基情綻放如盛夏的菊花,。

然而,，有基情好啊，搞在一起就可以一鍋端了,，不是有這么一首歌嘛~

so, 如此一鍋端的好戲怎能錯過呢,！

二,、認(rèn)識主角——貝塞爾

考考你，下面哪個貝塞爾是“貝塞爾曲線”的那個貝塞爾,？只有一次機(jī)會哦?。c擊選擇）

 

回答正確?。?nbsp;

貝塞爾,，Pierre Bézier,，法國數(shù)學(xué)家~

三、貝塞爾曲線作用

貝塞爾曲線作用：曲線,、畫曲線,、畫美女曲線、規(guī)律可循地畫美女曲線,。由于有此特性,，所以被SVG, Canvas, CSS3等寵幸，搞基從此開始,。

四,、如何用貝塞爾曲線畫曲線

如果給你一個點,，你能做什么？
答：我能撬動地球………………………………………………模型,。

如果給你兩個點,，你能做什么？
答：我能畫出地球………………………………………………曲線

是條件不足的,。

一個標(biāo)準(zhǔn)的3次貝塞爾曲線需要4個點：起始點,、終止點（也稱錨點）以及兩個相互分離的中間點。

無論SVG, Canvas還是CSS3動畫與貝塞爾搞基,，都牽扯到這4個點,。我們來瞅瞅~~

五、SVG和貝塞爾曲線的基情史

SVG之前有多次介紹,，可縮放矢量圖形(Scalable Vector Graphics),、二維、XML標(biāo)記,，類似下面：

<svg width="160px" height="160px">
  <path d="M10 80 ..." />
</svg>

本質(zhì)就是HTML類似東西,。

對于設(shè)計獅，也是可以把玩SVG的,，可以在線繪制,，或者在Illustrator中繪制并導(dǎo)出。

SVG的代碼不具體展開（說開了可以連載好幾篇）,，提一下其中一個path的標(biāo)簽,，可以繪制任意的路徑，自然也包括和貝塞爾搞基,。

三次貝塞爾曲線指令：C x1 y1, x2 y2, x y兩個控制點(x1,y1)和(x2,y2),，(x,y)代表曲線的終點。字母C表示特定動作與行為,，這里需要大寫,，表示標(biāo)準(zhǔn)三次方貝塞爾曲線。

看看下面一些描述貝塞爾曲線的代碼（片段）,，大家可以好好地感受下（其中字母M表示特定動作moveTo, 指將繪圖的起點移動到此處）,。

<svg width="190px" height="160px">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="3" fill="none"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="3" fill="none"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="3" fill="none"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="3" fill="none"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="3" fill="none"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="3" fill="none"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="3" fill="none"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="3" fill="none"/>
</svg>

曲線效果類似下面這張圖：

可以看到M后面的起點，加C后面3個點,，構(gòu)成了貝賽爾曲線的4個點,。

六、Canvas與貝塞爾曲線的基情史

Canvas之前也介紹過,，HTML 畫布元素,，腳本化客戶端繪圖。

其中Canvas有個bezierCurveTo()方法，專門用來和貝塞爾基情纏綿,。

代碼走起：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

開始點：moveTo(20,20)
控制點 1：bezierCurveTo(20,100,200,100,200,20)
控制點 2：bezierCurveTo(20,100,200,100,200,20)
結(jié)束點：  bezierCurveTo(20,100,200,100,200,20)

對比SVG代碼,，大家有木有發(fā)現(xiàn)，本質(zhì)上都是一個德行——有個m, 還有3個點,。所以,，才能基情四射啊,！

七,、CSS3動畫與貝塞爾曲線的基情史

貝塞爾曲線決定了CS3S動畫那個那個的節(jié)奏~ 是先快后慢呢，還是先慢后快~~

為了更好地搞基,，CSS3還專門留了個VIP屬性,，叫做cubic-bezier, 直譯為“立方-貝塞爾”，實際上就是指的標(biāo)準(zhǔn)三次方貝塞爾曲線,。

具體用法類似：

transition:cubic-bezier(.25,.1,.25,1)

其中.25,.1這個坐標(biāo)對于起點連接的那個錨點,；.25,1這個坐標(biāo)對于終點頭上那根天線頂端那個點。
//zxx：諸位,，擦亮雙眼,，兩坐標(biāo)不是一樣的哦~~

有專門的頁面讓大家感受CSS3動畫如何與貝塞爾曲線搞基的，點擊這里走起：
http:///#.25,.1,.25,1

以上鏈接是個非常好的工具,，大家想要什么效果,，可以自己調(diào)整，然后copy cubic-bezier相關(guān)代碼就可以了,。

有人會疑問,，CSS3動畫那個cubic-bezier值好像只有兩個點誒~~

那是因為CSS3動畫貝塞爾曲線的起點和終點已經(jīng)固定了，分別是(0,0)和(1,1).

八,、搞基史大集合

CSS3似乎稍稍不同步,，于是，我們稍作調(diào)整,，來個完美同頻率共振開天辟地?zé)o敵大搞基：

• CSS3貝塞爾起點是0,0; 終點是1, 1;

  cubic-bezier(x1,y1, x2,y2)

• SVG要想與和上面一起搞基,，只要：

  <path d="M0 0 C x1 y1, x2, y2, 1 1"/>

• canvas想要與大家一起搞基，只要：

  ctx.moveTo(0,0);
  ctx.bezierCurveTo(x1,y1,x2,y2,1,1);

其中,，完全一致的,，x1,y1就是(0,0)頭上插的天線的端點坐標(biāo)，x2,y2就是(1,1)頭上插的天線的端點坐標(biāo),。

于是,，三者與貝塞爾曲線完美搞基了,！撒花,，放鞭炮~~ 

九、結(jié)語以及參考內(nèi)容

與我們實際接觸更多應(yīng)該是CSS3的貝塞爾曲線，擼一遍就發(fā)現(xiàn)貝塞爾曲線其實就是那么個回事,，多一點感性直觀認(rèn)識,，處理問題就更加得心應(yīng)手了，希望本文內(nèi)容能夠?qū)δ膶W(xué)習(xí)有所幫助,。

參考文章：

• 突襲HTML5之SVG 2D入門2 – 圖形繪制
• http:///
• Understanding CSS cubic-bezier
• easing visualization
• 緩動函數(shù)