一、什么叫做貝賽爾曲線
貝塞爾曲線(Bézier curve)，又叫作貝茲曲線或貝濟埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線，該曲線分為一次/二次/三次/多次貝塞爾曲線。
一次貝塞爾曲線，就是一條連接兩點的直線段；
二次貝塞爾曲線，就是兩點間的一條拋物線，利用一個控制點來控制拋物線的形狀；
三次貝塞爾曲線，則需要四個點，一個起點，一個終點，兩個控制點來控制曲線的形狀，使用在css3中cubic-bezier就是三次貝賽爾曲線。
如下圖，P0,P1,P2,P3四個控制點來控制曲線的形狀
二、貝賽爾曲線在css3動畫中的應(yīng)用
因為瀏覽器兼容問題，cubic-bezier在PC端用的比較少，一般應(yīng)用于移動端。cubic-bezier為通過貝塞爾曲線來計算“轉(zhuǎn)換”過程中的屬性值，如下曲線所示，通過改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個過程的Output Percentage。w3c文檔中表述是所有值需在[0, 1]區(qū)域內(nèi)，否則無效。但是在一些瀏覽器（Chrome，F(xiàn)irefox，Opera，IE11 預(yù)覽版）下對P1(x1, y1)和P2(x2, y2)的坐標(biāo)中的y1和y2并沒有這個限制，曲線可以是負值，也可以取大于1的值。如果x1和x2是負數(shù)，或者大于1的值那么直接應(yīng)用最終樣式?jīng)]有過渡效果。而一些老版本的瀏覽器曲線值仍需在[0, 1]區(qū)域內(nèi)，否則直接應(yīng)用最終樣式。
具體用法為：
其中cubic-bezier中兩個點參數(shù)代表的運動速度可以參考http://cubic-bezier.com，可以根據(jù)dom元素運動效果來調(diào)整。下面介紹CSS3中常見的幾種運動軌跡是怎么用貝塞爾曲線實現(xiàn)的：
可以看到我們常見的幾種運動方式其實都是簡化的貝塞爾曲線，以下兩行代碼起到的效果是一樣的。
transition: 2s all cubic-bezier(0.25,0.1,0.25,1.0);
transition: 2s all ease;
具體可以參考鏈接：https://www.w3.org/TR/css3-transitions/#transition-timing-function_tag，以上這些都是控制dom元素做規(guī)則運動時的速度，具體實現(xiàn)代碼如下：
通過改變目標(biāo)元素定位的left值來實現(xiàn)元素左右運動的效果。同理，我們也可以改變目標(biāo)元素的其他屬性來達到想要的效果。
三、如何運用貝塞爾曲線實現(xiàn)曲線運動
通過上面的例子，我們知道可以通過CSS3的transition屬性來控制元素的動畫效果。如果我們要控制一個元素做規(guī)則的圓周運動該怎么實現(xiàn)呢？看下面的demo：
可以很清楚的看到，我們是通過animation來實現(xiàn)動畫效果，但是animation無法單獨擔(dān)當(dāng)起實現(xiàn)動畫的效果，需要用到承載動畫的另一個屬性——@keyframes，這個屬性是有兼容性的問題的，使用時需要加上對應(yīng)的前綴來解決兼容性問題。我們使用@keyframe定義了兩個動畫animX和animY，利用animation屬性來同時改變元素的left值和top值，來達到圓周運動的效果，具體的cubix-bezier參數(shù)設(shè)定需要參考http://cubic-bezier.com。這里面animX有一個delay設(shè)置為-2s，是讓目標(biāo)元素提前到達動畫開始的原點，元素的left、top值的變化速度是受貝塞爾曲線cubic-bezier(0.36,0,0.64,1)來控制的。通過同時改變left、top值來達到圓周運動的效果。
有興趣的，可以參考貝塞爾曲線的參數(shù)設(shè)定來實現(xiàn)不一樣的運動效果。
