資訊專欄INFORMATION COLUMN
摘要：根據(jù)方程的最高階數(shù)，可以分為線性貝塞爾曲線二次貝塞爾曲線三次貝塞爾曲線以及更高次的貝塞爾曲線。貝塞爾曲線掃盲在中使用的函數(shù)，是一個(gè)三次貝塞爾曲線函數(shù)。三次貝塞爾曲線中四個(gè)點(diǎn)，在中第一個(gè)點(diǎn)和最后一個(gè)點(diǎn)是固定坐標(biāo)的和是傳入函數(shù)中的參數(shù)的。
前言
上一篇 css3 動(dòng)畫(huà)（一） transition 中，介紹了 transition 的用法。其中 transition 包含四個(gè)可設(shè)置的屬性：
有過(guò)渡效果的屬性
過(guò)渡時(shí)長(zhǎng)
過(guò)渡函數(shù)？
過(guò)渡時(shí)延
其中，1、2 以及 4 都挺好理解的，但是 3 是個(gè)什么東西？其實(shí) 3 是 css3 中的 timing-function，其中 3 有兩種類型的值：
cubic-bezier(x1, y1, x2, y2)：立方貝塞爾曲線
steps(number_of_steps, direction)
本篇就總結(jié)一下 cubic-bezier(x1, y1, x2, y2)：立方貝塞爾曲線
貝塞爾曲線簡(jiǎn)介貝塞爾曲線（Bezier curve）是計(jì)算機(jī)圖形學(xué)中重要的參數(shù)曲線，它通過(guò)一個(gè)方程來(lái)描述一條曲線。根據(jù)方程的最高階數(shù)，可以分為線性貝塞爾曲線、二次貝塞爾曲線、三次貝塞爾曲線以及更高次的貝塞爾曲線。
貝塞爾曲線掃盲
在 css3 中使用的 cubic-bezier() 函數(shù)，是一個(gè) 三次貝塞爾曲線函數(shù)。
三次貝塞爾曲線中四個(gè)點(diǎn)，在 cubic-bezier() 中：
第一個(gè)點(diǎn) p0(0, 0)和最后一個(gè)點(diǎn) p3(1, 1)是固定坐標(biāo)的
p1(x1, y1) 和 p2(x2, y2) 是傳入 cubic-bezier() 函數(shù)中的參數(shù)的。其中 x∈[0, 1]，y 可以不在 [0, 1] 區(qū)間內(nèi)，但最大值最好不要大于 1.5，最小值不要小于 -0.5
0 和 1 分別表示 0% 和 100%
cubic-bezier(x1, y1, x2, y2) 接受的參數(shù)便是 p1(x1, h1) 和 p2(x2, y2) 的坐標(biāo)。
那我們?cè)趺传@取我們想要的貝塞爾曲線呢？進(jìn)這個(gè) 網(wǎng)站
css3 貝塞爾曲線代表的含義在上面那個(gè) 網(wǎng)站 中，我們可以通過(guò)拖拽 p1 和 p2 點(diǎn)，來(lái)改變兩點(diǎn)的坐標(biāo)，從而產(chǎn)生一條曲線。
那么這條曲線代表什么含義呢？
橫坐標(biāo)：時(shí)間。時(shí)間是勻速增加的
縱坐標(biāo)：進(jìn)度。隨著時(shí)間的增加，進(jìn)度也會(huì)增加
斜率：速度
由于 時(shí)間是勻速增加的，進(jìn)度增加的快慢是受斜率（速度）影響的。所以這是一條表示進(jìn)度變化快慢的速度曲線
這個(gè) 進(jìn)度 在 css 中，實(shí)際指的就是樣式變化前后的值。如：
width 從 100px 變?yōu)?200px，縱坐標(biāo)的起點(diǎn)就為 100px，終點(diǎn)為 200px
opacity 從 0 變?yōu)?1，縱坐標(biāo)的起點(diǎn)就為 0，終點(diǎn)為 1
...
transition + cubic-bezier() 實(shí)現(xiàn)平拋動(dòng)畫(huà)最終效果如下：
https://codepen.io/reai3041/p...
我們知道，平拋運(yùn)動(dòng)可以分解為兩個(gè)方向的運(yùn)動(dòng)：
水平方向：勻速運(yùn)動(dòng)
垂直方向：加速度不變的勻加速運(yùn)動(dòng)
這樣，我們就可以分解為水平和垂直方向上的 過(guò)渡效果：
.ball {
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
left: 80px;
top: 30px;
}
/* 終點(diǎn) */
.ball.end {
left: 180px;
top: 230px;
transition: left 0.2s linear, top 0.2s cubic-bezier(.48,0,.94,.28);
}
通過(guò)改變 left 和 top 值：
left 應(yīng)用 linear 速度曲線（勻速）
top 應(yīng)用 cubic-bezier(.48,0,.94,.28) 速度曲線（加速度不變的加速運(yùn)動(dòng)）
來(lái)獲得平拋運(yùn)動(dòng)的動(dòng)畫(huà)效果
其中，cubic-bezier() 函數(shù)的參數(shù)，可以在 網(wǎng)站 里自定義點(diǎn)的位置，然后得到自己想要的速度變化曲線。
在平拋運(yùn)動(dòng)垂直方向的速度曲線大概是這樣子的：
這樣，我們就知道了 cubic-bezier() 函數(shù)的參數(shù)（圖片中的這條曲線，其實(shí)就可以看做是實(shí)際的平拋的曲線）
代碼及效果：
https://codepen.io/reai3041/p...
css3 中的貝塞爾曲線其實(shí)很簡(jiǎn)單：一條以 時(shí)間為橫坐標(biāo)，以 進(jìn)度為縱坐標(biāo) 的 和速度相關(guān) 的曲線，它表示了 過(guò)渡/動(dòng)畫(huà) 中間狀態(tài)的 變化快慢。
下一篇：css3 動(dòng)畫(huà)（三）animation 簡(jiǎn)介
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116827.html
摘要：動(dòng)畫(huà)曲線的應(yīng)用了解了如何用貝塞爾曲線來(lái)指定動(dòng)畫(huà)曲線后，很多動(dòng)畫(huà)涉及到速度方面的效果就可以實(shí)現(xiàn)了，例如小車加速剎車，彈簧動(dòng)畫(huà)等速度軌跡都可以根據(jù)自己的需要來(lái)進(jìn)行定制。 貝塞爾曲線又叫貝茲曲線，在大學(xué)高數(shù)中一度讓我非常頭疼。前陣子練手寫(xiě)動(dòng)畫(huà)的時(shí)候，發(fā)現(xiàn)貝塞爾曲線可以應(yīng)用于軌跡的繪制以及定義動(dòng)畫(huà)曲線。 本文就來(lái)探究一下，貝塞爾曲線到底是個(gè)什么樣的存在。 貝塞爾曲線原理 貝塞爾曲線由n個(gè)點(diǎn)來(lái)決...
摘要：但目前白名單申請(qǐng)途徑已經(jīng)關(guān)閉。目前在安卓有一種同層播放器的解決方案?？山鉀Q安卓機(jī)自動(dòng)全屏以及視頻播放完畢會(huì)跳出廣告的問(wèn)題，并且可以實(shí)現(xiàn)交互。 本文在H5動(dòng)效的常見(jiàn)制作手法的基礎(chǔ)上，對(duì)相印的H5動(dòng)效制作手法進(jìn)行了擴(kuò)展和整理，并結(jié)合案例談?wù)勗趺磳⑵渥龅蒙鷦?dòng)。 視頻類 1、體驗(yàn)案例 視頻類h5可以帶給用戶動(dòng)效逼真，流暢的體驗(yàn)。雖然說(shuō)制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創(chuàng)造出...
摘要：規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。等同于貝塞爾曲線平滑過(guò)渡。等同于貝塞爾曲線由慢到快再到慢。等同于貝塞爾曲線等同于等同于接受兩個(gè)參數(shù)的步進(jìn)函數(shù)。特定的貝塞爾曲線類型，個(gè)數(shù)值需在區(qū)間內(nèi)規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始。 實(shí)現(xiàn)如圖所示的點(diǎn)點(diǎn)點(diǎn)loading效果：showImg(https://segmentfault.com/img/bVM22d?w=146&h=46); 一：CSS3 animati...
閱讀 3632·2023-04-26 02:05
閱讀 2074·2021-11-19 11:30
閱讀 4310·2021-09-30 09:59
閱讀 3231·2021-09-10 10:51
閱讀 2675·2021-09-01 10:30
閱讀 1589·2021-08-11 11:20
閱讀 2679·2019-08-30 15:54
閱讀 616·2019-08-30 10:49
