資訊專欄INFORMATION COLUMN
摘要：動畫曲線的應(yīng)用了解了如何用貝塞爾曲線來指定動畫曲線后，很多動畫涉及到速度方面的效果就可以實現(xiàn)了，例如小車加速剎車，彈簧動畫等速度軌跡都可以根據(jù)自己的需要來進行定制。
貝塞爾曲線又叫貝茲曲線，在大學(xué)高數(shù)中一度讓我非常頭疼。前陣子練手寫動畫的時候，發(fā)現(xiàn)貝塞爾曲線可以應(yīng)用于軌跡的繪制以及定義動畫曲線。
本文就來探究一下，貝塞爾曲線到底是個什么樣的存在。
貝塞爾曲線原理貝塞爾曲線由n個點來決定，其曲線軌跡可以由一個公式來得出：
其中n就代表了貝塞爾曲線是幾階曲線，該公式描述了曲線運動的路徑。
以下我們來討論一下，貝塞爾公式如何推導(dǎo)。
一階貝塞爾曲線設(shè)定圖中運動的點為Pt，t為運動時間，t∈(0,1)，可得如下公式
二階貝塞爾曲線在二階貝塞爾曲線中，已知三點恒定（P0,P1,P2），設(shè)定在P0P1中的點為Pa，在P1P2中的點為Pb，Pt在PaPb上的點，這三點都在相同時間t內(nèi)做勻速運動。
由公式(1)可知
將公式(2)(3)代入公式(4)中，可得
三階貝塞爾曲線同理，根據(jù)以上的推導(dǎo)過程可得
由此可以推導(dǎo)
n階貝塞爾曲線放上一個網(wǎng)址，隨意感受一下貝塞爾曲線的繪制過程：
http://myst729.github.io/bezi...
實際應(yīng)用貝塞爾曲線在前端中主要有兩方面的應(yīng)用，一方面可以作為動畫曲線應(yīng)用于CSS3動畫中；另一方面可以通過canvas來繪制曲線達到需要的效果。
CSS3中貝塞爾曲線的應(yīng)用在CSS3中，有兩屬性經(jīng)常被用到：transition-timing-function和animation-timing-function,這兩個分別代表了過渡的速度和動畫的速度。CSS3為我們提供了一個新的工具——cubic-bezier(x1,y1,x2,y2)。這個工具能夠生成一個速度曲線，使我們的元素按照該曲線來調(diào)節(jié)速度。
在上面的推導(dǎo)中，我們知道在貝塞爾公式中，有兩個點的位置恒定——P0和P1，cubic-bezier中定義了兩個控制點的位置，所以該曲線為三階貝塞爾曲線。
有個網(wǎng)站可以方便我們快速建立一個貝塞爾曲線：cubic-bezier
貝塞爾曲線與動畫曲線的關(guān)聯(lián)先來一波動圖簡單粗暴的感受一下：
例一：
例二：
例三：
左邊的是貝塞爾曲線，橫軸代表了事件，豎軸代表了進度，無法直觀得感受出速度的變化。
右邊的曲線是控制面板中的動畫曲線，橫軸是時間，豎軸是速度，可以方面地看出速度的變化。
上述例子中，以前進反向為速度正方向，后退方向為速度反方向。
如何得知速度的變化 推導(dǎo)例一中，貝塞爾曲線為一條直線，當時間均勻變化時，進度也在均勻變大，由此可知速度恒定不變，時間和進度之間的關(guān)系可以用一個線性方程來表示：
y=ax+b (a=1,b=0)
其中x為時間，y為進度，a即為速度。
從上面結(jié)論中啟發(fā)，去觀察其他貝塞爾曲線，
圖中是一段變化的曲線，我們?nèi)∑渲幸恍《?，將其看作穩(wěn)定不變的一段直線，通過下面的線性方程來表示，并通過紅線標注在圖中：
y=ax+b
根據(jù)初中數(shù)學(xué)的內(nèi)容，我們知道，當a>1時，與x軸的夾角∈（45°,90°)；當a∈(0,1)時，與x軸的夾角在(0,45°)之間。相同的時間內(nèi)，與x軸的夾角越大，a越大，速度越快。
觀察上圖的夾角變化趨勢，夾角逐漸變小趨向于0，而后逐漸變大，趨向于90°，對應(yīng)速度應(yīng)是速度逐漸變慢趨向于0，之后逐漸變快。
放上動畫曲線以及動圖來驗證一下我們的推測：
下圖中的曲線部分在第四象限，部分在第一象限，這時對應(yīng)的動畫曲線該如何推導(dǎo)呢。
同樣將該曲線視為由n段平滑的直線構(gòu)成，由線性方程來表示直線的趨勢，可知速度a方向一開始為負，之后慢慢向正方靠近，a的速率也在由大變小，當為0時，再向正方慢慢變大。即該曲線表示元素一開始在朝反方向減速運動，當速度為0后，向正方向作加速運動。
通過動畫曲線及動圖來驗證上述推導(dǎo)：
驗證用兩個曲線來驗證一下上面的結(jié)論：
從結(jié)果可以判斷，用上述推導(dǎo)方法可以正確得出貝塞爾曲線與動畫曲線之間的關(guān)系。
動畫曲線的應(yīng)用了解了如何用貝塞爾曲線來指定動畫曲線后，很多動畫涉及到速度方面的效果就可以實現(xiàn)了，例如小車加速剎車，彈簧動畫等速度軌跡都可以根據(jù)自己的需要來進行定制。
放上一個緩動函數(shù)速查網(wǎng)址，可以讓自己的動效更加真實：緩動函數(shù)
放一個小例子：
該動畫模擬了小球落下回彈的過程
代碼如下：
.ball {
width: 30px;
height: 30px;
background: #000000;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
animation: move 4s cubic-bezier(0.36, 1.7, 0.26, 0.61) 1s infinite;
}
@keyframes move {
0% {
top: 0;
}
100% {
top: 90%;
}
}
這類動畫可以參考網(wǎng)上大大們的案例：
貝塞爾曲線與CSS3動畫、SVG和canvas的應(yīng)用
理解與運用貝塞爾曲線
利用canvas繪制貝塞爾曲線canvas中提供了api可以快速繪制一條貝塞爾曲線，來達到需要的效果：
二階貝塞爾曲線quadraticCurveTo(x1,y1,x2,y2)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(40,200,200,20);
ctx.stroke();
其中moveTo定義了起始點，quadraticCurveTo(x1,y1,x2,y2)中的(x1,y1)為控制點，(x2,y2)為終點
三階貝塞爾曲線bezierCurveTo(x1,y1,x2,y2,x3,y3)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(40,100,200,150,200,20);
ctx.stroke();
其中moveTo定義了起始點，bezierCurveTo(x1,y1,x2,y2)中的(x1,y1),(x2,y2)為控制點，(x3,y3)為終點
總結(jié)為了弄清貝塞爾曲線是個什么東西，和動畫曲線、速度又有什么關(guān)聯(lián)，作者跑去復(fù)習(xí)了一下那些早扔給老師的東西，有說錯的請輕拍/(ㄒoㄒ)/~~
廣而告之本文發(fā)布于薄荷前端周刊，歡迎Watch & Star ★，轉(zhuǎn)載請注明出處。
歡迎討論，點個贊再走吧 ????? ～文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102522.html
摘要：一條正在繪制中的三次方貝塞爾曲線因為該曲線由四個點形成，我們將其稱為三次方貝塞爾曲線，而不是二次方曲線三個點或四次方曲線五個點?，F(xiàn)在終于可以將貝塞爾曲線收入囊中了，也已經(jīng)對這 作者：Nicolas（滬江前端開發(fā)工程師）本文原創(chuàng)翻譯，轉(zhuǎn)載請注明作者及出處。 各位，趕緊綁住自己并緊緊抓牢了，因為當你掌握了特別有趣但又復(fù)雜的CSS時序函數(shù)之后，你將會真正體驗到豎起頭發(fā)般的興奮感受。 好吧，本...
摘要：關(guān)鍵幀是用來通知瀏覽器在規(guī)定的時間點上應(yīng)有的屬性值然后填充空白。每一對數(shù)值內(nèi)包含表示三次貝塞爾曲線控制點的和坐標。即使每個控制點的和值的微小差異都會輸出完全不同的貝塞爾曲線。 原文請查閱這里，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。 本系列持續(xù)更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第十三章。 概述 正如你所知，動畫在...
摘要：關(guān)鍵幀是用來通知瀏覽器在規(guī)定的時間點上應(yīng)有的屬性值然后填充空白。每一對數(shù)值內(nèi)包含表示三次貝塞爾曲線控制點的和坐標。即使每個控制點的和值的微小差異都會輸出完全不同的貝塞爾曲線。 原文請查閱這里，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。 本系列持續(xù)更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第十三章。 概述 正如你所知，動畫在...
摘要：關(guān)鍵幀是用來通知瀏覽器在規(guī)定的時間點上應(yīng)有的屬性值然后填充空白。每一對數(shù)值內(nèi)包含表示三次貝塞爾曲線控制點的和坐標。即使每個控制點的和值的微小差異都會輸出完全不同的貝塞爾曲線。 原文請查閱這里，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。 本系列持續(xù)更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第十三章。 概述 正如你所知，動畫在...
閱讀 1867·2021-09-14 18:03
閱讀 2298·2019-08-30 15:48
閱讀 1157·2019-08-30 14:09
閱讀 533·2019-08-30 12:55
閱讀 2755·2019-08-29 11:29
閱讀 1519·2019-08-26 13:43
閱讀 2343·2019-08-26 13:30
閱讀 2402·2019-08-26 12:17
