當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

贝塞尔曲线与CSS3动画、SVG和canvas的应用

發(fā)布時(shí)間：2025/7/25 CSS 70 豆豆

生活随笔收集整理的這篇文章主要介紹了贝塞尔曲线与CSS3动画、SVG和canvas的应用小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

簡(jiǎn)介

貝塞爾曲線是可以做出很多復(fù)雜的效果來(lái)的，比如彈跳球的復(fù)雜動(dòng)畫效果，首先加速下降，停止，然后彈起時(shí)逐漸減速的效果。

使用貝塞爾曲線常用的兩個(gè)網(wǎng)址如下：

緩動(dòng)函數(shù)：http://www.xuanfengge.com/easeing/easeing/

cubic-bezier：http://cubic-bezier.com/

如何用貝塞爾曲線畫曲線

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

無(wú)論SVG, Canvas還是CSS3動(dòng)畫，都牽扯到這4個(gè)點(diǎn)。

SVG和貝塞爾曲線的結(jié)合

svg可縮放矢量圖形(Scalable Vector Graphics)、二維、XML標(biāo)記，類似下面：

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

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

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

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

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

Canvas與貝塞爾曲線的結(jié)合

其中Canvas有個(gè)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();

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

CSS3動(dòng)畫與貝塞爾曲線的結(jié)合

用法如下：

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

其中.25,.1這個(gè)坐標(biāo)對(duì)于起點(diǎn)連接的那個(gè)錨點(diǎn)；.25,1這個(gè)坐標(biāo)對(duì)于終點(diǎn)頭上那根天線頂端那個(gè)點(diǎn)。

有人會(huì)疑問(wèn)，CSS3動(dòng)畫那個(gè)cubic-bezier值好像只有兩個(gè)點(diǎn)誒~~

那是因?yàn)镃SS3動(dòng)畫貝塞爾曲線的起點(diǎn)和終點(diǎn)已經(jīng)固定了，分別是(0,0)和(1,1)。

css3中常用的幾個(gè)動(dòng)畫效果：

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

實(shí)現(xiàn)一個(gè)彈球的效果：

html代碼：

css代碼：

body{margin:0;padding:0;} #ball{background:red;height:100px;width:100px;position:absolute;top:10px;left:20px;border-radius:50px; } #floor{position:absolute;bottom:10px;left:0px;width:350px;height:1px;border-top:5px solid brown; }

js代碼：

;(function(){var down=false,trans='transition',eventName='transitionend';if(typeof document.body.style.webkitTransition==='string'){trans='webkitTransition';eventName='webkitTransitionEnd';}else if(typeof document.body.style.MozTransition==='string'){trans='MozTransition';}var ball=document.getElementById('ball'); var floor=document.getElementById('floor');function bounce(){if(down){ball.style[trans]="Top 1s cubic-bezier(0,.27,.32,1)";ball.style.top='10px';down=false;}else{ball.style[trans]="Top 1s cubic-bezier(1,0,0.96,0.91)";ball.style.top=(floor.offsetTop-100)+'px';down=true;} }ball.addEventListener(eventName,bounce); bounce();})();

說(shuō)明：document.body.style.webkitTransition獲取以webkit為前綴的transition
在WebKit引擎的瀏覽器中，當(dāng)css3的transition動(dòng)畫執(zhí)行結(jié)束時(shí)，觸發(fā)webkitTransitionEnd事件。

實(shí)現(xiàn)效果如圖所示：

下載地址：《CSS3動(dòng)畫：小球彈跳動(dòng)畫》

總結(jié)

canvas：

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

SVG：

CSS3貝塞爾起點(diǎn)是0,0; 終點(diǎn)是1, 1;

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

?參考地址：貝塞爾曲線與CSS3動(dòng)畫、SVG和canvas的基情

轉(zhuǎn)載于:https://www.cnblogs.com/moqiutao/p/7089436.html

總結(jié)

以上是生活随笔為你收集整理的贝塞尔曲线与CSS3动画、SVG和canvas的应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： datetimepicker时间控件
下一篇： Android 使用AIDL实现进程间的