一、什么叫做貝賽爾曲線
貝塞爾曲線(Bézier curve)志衍，又叫作貝茲曲線或貝濟(jì)埃曲線萍聊，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線，該曲線分為一次/二次/三次/多次貝塞爾曲線翼岁。
一次貝塞爾曲線类垫，就是一條連接兩點(diǎn)的直線段；
二次貝塞爾曲線琅坡，就是兩點(diǎn)間的一條拋物線悉患，利用一個(gè)控制點(diǎn)來(lái)控制拋物線的形狀；
三次貝塞爾曲線榆俺，則需要四個(gè)點(diǎn)售躁，一個(gè)起點(diǎn)坞淮，一個(gè)終點(diǎn)，兩個(gè)控制點(diǎn)來(lái)控制曲線的形狀陪捷，使用在css3中cubic-bezier就是三次貝賽爾曲線回窘。
如下圖，P0,P1,P2,P3四個(gè)控制點(diǎn)來(lái)控制曲線的形狀
二市袖、貝賽爾曲線在css3動(dòng)畫(huà)中的應(yīng)用
因?yàn)闉g覽器兼容問(wèn)題啡直，cubic-bezier在PC端用的比較少，一般應(yīng)用于移動(dòng)端苍碟。cubic-bezier為通過(guò)貝塞爾曲線來(lái)計(jì)算“轉(zhuǎn)換”過(guò)程中的屬性值付枫，如下曲線所示，通過(guò)改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個(gè)過(guò)程的Output Percentage驰怎。w3c文檔中表述是所有值需在[0, 1]區(qū)域內(nèi)阐滩，否則無(wú)效。但是在一些瀏覽器（Chrome县忌，F(xiàn)irefox掂榔，Opera，IE11 預(yù)覽版）下對(duì)P1(x1, y1)和P2(x2, y2)的坐標(biāo)中的y1和y2并沒(méi)有這個(gè)限制症杏，曲線可以是負(fù)值装获，也可以取大于1的值。如果x1和x2是負(fù)數(shù)厉颤，或者大于1的值那么直接應(yīng)用最終樣式?jīng)]有過(guò)渡效果穴豫。而一些老版本的瀏覽器曲線值仍需在[0, 1]區(qū)域內(nèi)，否則直接應(yīng)用最終樣式逼友。
具體用法為：
其中cubic-bezier中兩個(gè)點(diǎn)參數(shù)代表的運(yùn)動(dòng)速度可以參考http://cubic-bezier.com精肃，可以根據(jù)dom元素運(yùn)動(dòng)效果來(lái)調(diào)整。下面介紹CSS3中常見(jiàn)的幾種運(yùn)動(dòng)軌跡是怎么用貝塞爾曲線實(shí)現(xiàn)的：
可以看到我們常見(jiàn)的幾種運(yùn)動(dòng)方式其實(shí)都是簡(jiǎ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ī)則運(yùn)動(dòng)時(shí)的速度黎烈，具體實(shí)現(xiàn)代碼如下：
通過(guò)改變目標(biāo)元素定位的left值來(lái)實(shí)現(xiàn)元素左右運(yùn)動(dòng)的效果习柠。同理，我們也可以改變目標(biāo)元素的其他屬性來(lái)達(dá)到想要的效果照棋。
三资溃、如何運(yùn)用貝塞爾曲線實(shí)現(xiàn)曲線運(yùn)動(dòng)
通過(guò)上面的例子，我們知道可以通過(guò)CSS3的transition屬性來(lái)控制元素的動(dòng)畫(huà)效果烈炭。如果我們要控制一個(gè)元素做規(guī)則的圓周運(yùn)動(dòng)該怎么實(shí)現(xiàn)呢溶锭？看下面的demo：
可以很清楚的看到，我們是通過(guò)animation來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果梳庆，但是animation無(wú)法單獨(dú)擔(dān)當(dāng)起實(shí)現(xiàn)動(dòng)畫(huà)的效果暖途，需要用到承載動(dòng)畫(huà)的另一個(gè)屬性——@keyframes卑惜，這個(gè)屬性是有兼容性的問(wèn)題的，使用時(shí)需要加上對(duì)應(yīng)的前綴來(lái)解決兼容性問(wèn)題驻售。我們使用@keyframe定義了兩個(gè)動(dòng)畫(huà)animX和animY露久，利用animation屬性來(lái)同時(shí)改變?cè)氐膌eft值和top值，來(lái)達(dá)到圓周運(yùn)動(dòng)的效果欺栗，具體的cubix-bezier參數(shù)設(shè)定需要參考http://cubic-bezier.com毫痕。這里面animX有一個(gè)delay設(shè)置為-2s，是讓目標(biāo)元素提前到達(dá)動(dòng)畫(huà)開(kāi)始的原點(diǎn)迟几，元素的left消请、top值的變化速度是受貝塞爾曲線cubic-bezier(0.36,0,0.64,1)來(lái)控制的。通過(guò)同時(shí)改變left类腮、top值來(lái)達(dá)到圓周運(yùn)動(dòng)的效果臊泰。
有興趣的，可以參考貝塞爾曲線的參數(shù)設(shè)定來(lái)實(shí)現(xiàn)不一樣的運(yùn)動(dòng)效果蚜枢。
