貝塞爾曲線况毅，常用在css3中 <b>transition-timing-function</b> 的值里分蓖；
而這個(gè)屬性是控制css3動(dòng)畫的運(yùn)動(dòng)軌跡
上圖的貝塞爾曲線是經(jīng)典的 ease-in 曲線，x軸表示隨著時(shí)間勻速前進(jìn)尔许，y軸表示隨著時(shí)間推移運(yùn)動(dòng)距離的百分比么鹤，x y的最大值都為 <b>1<b>
貝塞爾值
貝塞爾運(yùn)動(dòng)曲線有兩個(gè)值，如ease-in的貝塞爾值：
transition:all 1s cubic-bezier(.42,0,1,1);
可以看到味廊，cubic-bezier 中有4個(gè)值蒸甜，這4個(gè)值代表的是控制兩個(gè)曲線的兩個(gè)圓點(diǎn)在坐標(biāo)中的位置。
0.42,0 表示的是上圖中<b>紅色圓點(diǎn)</b>的坐標(biāo)余佛， 1,1表示的是<b>綠色圓點(diǎn)</b>的坐標(biāo)柠新。由此組成了一個(gè)完整的貝塞爾值。
理解了貝塞爾值的意思辉巡，接下來介紹這兩個(gè)圓點(diǎn)是干什么的（做過ps flash之類設(shè)計(jì)的應(yīng)該能猜到）恨憎。
控制錨點(diǎn)
專業(yè)術(shù)語也難說得通俗易懂，就還用 <b>紅點(diǎn) 綠點(diǎn)</b> 來說吧郊楣。
這兩個(gè)圓點(diǎn)的位置憔恳，-> 決定了這個(gè)曲線的形狀，-> 形狀又決定了運(yùn)動(dòng)軌跡的變化净蚤，-> 從而形成我們看到的曲線運(yùn)動(dòng)
這兩個(gè)圓點(diǎn)是如何控制曲線的喇嘱， 點(diǎn)我，自己動(dòng)塞栅。
操控原理上用了高數(shù)中的切線者铜，
圓點(diǎn)帶動(dòng)的那條線腔丧，就是這兩條線連接處的一個(gè)切線。
就以此圖為例：
通過兩個(gè)圓點(diǎn)操控出的這條曲線作烟，意思是：
- 隨著時(shí)間勻速前進(jìn)愉粤，
- 動(dòng)畫的運(yùn)動(dòng)是先慢慢移動(dòng)，
- 再逐漸加快移動(dòng)拿撩。
就是常用的 ease-in 動(dòng)畫
貼出一段代碼衣厘，做做測試就知道了：
點(diǎn)擊RunJS，鼠標(biāo)移入小球压恒，即可觀看影暴。
根據(jù)自己調(diào)好的貝塞爾值，進(jìn)行測試探赫。
這里遇到一個(gè)問題： 為何曲線運(yùn)動(dòng)軌跡型宙，會(huì)出現(xiàn)折線的情況：
