建站
咨詢
售后
建站咨詢
新聞中心
我們每天都在網(wǎng)上摸魚，作為前端開發(fā)人員，網(wǎng)站上微妙的細(xì)節(jié)變化通過比別人會更關(guān)注。我一直注意到的一件事是網(wǎng)站上的動畫的流暢性。動畫對于用戶體驗(yàn)來說是非常好的，有時我們可以一些有趣的動畫來留住用戶。
10年積累的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有嘉魚免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
創(chuàng)建高級動畫聽起來是一個很難的話題，但好消息是，在CSS中，可以將多個簡單的動畫相互疊加，以創(chuàng)建一個更復(fù)雜的動畫
在這節(jié)課中，我們會學(xué)習(xí)如下幾點(diǎn)：
- 什么是貝塞爾曲線，以及如何用一行CSS來創(chuàng)建一個 "復(fù)雜"的動畫
- 如何將動畫相互疊加以創(chuàng)建一個高級動畫
- 如何通過應(yīng)用上面學(xué)到的兩點(diǎn)來創(chuàng)建一個過山車動畫
什么是貝塞爾曲線
CSS中的 cubic-bezier 函數(shù)是一個緩動函數(shù)，可以讓我們完全控制動畫在時間上的表現(xiàn)。下面是官方的定義：
貝塞爾緩動函數(shù)是一種由四個實(shí)數(shù)定義的緩和函數(shù)，指定了貝塞爾曲線的兩個控制點(diǎn)P1和P2，其端點(diǎn)P0和P3分別固定在（0, 0）和（1, 1）。P1和P2的x坐標(biāo)被限制在[0, 1]范圍內(nèi)。
什么是緩動函數(shù)？
線性曲線
想象兩個點(diǎn)P0和P1，其中P0是動畫的起點(diǎn)，P1是結(jié)束點(diǎn)?，F(xiàn)在想象另一個點(diǎn)在兩點(diǎn)之間線性移動，如下所示
這就是所謂的線性曲線，也是最簡單的動畫。
二次貝塞爾曲線
如下圖所示，有三個點(diǎn)。P0、P1和P2。我們想讓動畫從P0?移動到P2?。在這種情況下，P1?是一個控制點(diǎn)，控制動畫的曲線。
二次方貝塞爾概念：
- 在P0和P1之間以及P1和P2之間（用灰線表示）連接虛線
- 點(diǎn)Q0沿著P0和P1之間的直線移動。同時，點(diǎn)Q1沿著P1和P2之間的直線移動
- 在Q0和Q1之間連接一條虛線（用綠線表示）
- 在Q0和Q1開始移動的同時，點(diǎn)B開始沿著綠線移動，B點(diǎn)所走的路徑就是動畫路徑
請注意，Q0、Q1和B不以相同的速度移動。它們都必須在同一時間開始，并在同一時間完成它們的路徑。因此，每一個點(diǎn)都是根據(jù)它所移動的線長以適當(dāng)?shù)乃俣纫苿拥摹?/p>
三次貝塞爾曲線
三次貝塞爾曲線由4個點(diǎn)組成。P0, P1, P2和P3。動畫開始于P0，結(jié)束于P3。P1和P2是我們的控制點(diǎn)。
三次貝賽爾的工作原理如下：
- 在（P0, P1）、（P1, P2）和（P2, P3）之間連接虛線，由灰線表示
- 點(diǎn)Q0、Q1和Q2分別沿直線（P0，P1）、（P1，P2）和（P2，P3）移動
- 在（Q0, Q1）和（Q1, Q2）之間連接虛線，它們由綠線表示。
- 點(diǎn)R0和R1分別沿直線（Q0, Q1）和（Q1, Q2）移動
- 連接R0和R1之間的線（用藍(lán)線表示）
- 最后，B點(diǎn)沿著R0和R1之間的連接線移動，B點(diǎn)所走的路徑就是動畫路徑
如果你想更好地了解三次體貝塞爾的工作原理，建議你看看這個desmos鏈接。玩玩控制點(diǎn)，看看動畫如何隨時間變化。(注意，鏈接中的動畫是由黑線表示的）。
疊加動畫
有很多步驟的大動畫可以被分解成多個小動畫。在 css 中，通過添加??animation-delay??屬性來實(shí)現(xiàn)這一點(diǎn)。計(jì)算延遲很簡單，把你要計(jì)算動畫延遲的那個動畫之前的所有動畫的時間加起來。
例如：
animation: movePointLeft 4s linear forwards, movePointDown 3s linear forwards;
這里，我們有兩個動畫，movePointLeft和movePointDown。movePointLeft的動畫延遲是零，因?yàn)樗俏覀兿胂冗\(yùn)行的動畫。movePointDown的動畫延遲是4秒，因?yàn)閙ovePointLeft將在這段時間后完成。
因此，animation-delay屬性：
animation-delay: 0s, 4s;
注意，如果有兩個或更多的動畫同時開始，它們的動畫延遲將是一樣的。此外，當(dāng)你計(jì)算即將開始的動畫的延遲時，把它們視為一個動。例如 ：
animation: x 4s linear forwards, y 4s linear forwards, jump 2s linear forwards;
假設(shè)x和y同時開始。在這種情況下，x和y的動畫延遲都將為零，而 jump 動畫的延遲將為4秒（而不是8秒?。?。
animation-delay: 0s, 0s, 4s;
創(chuàng)建過山車
掌握了上面的知識，是時候應(yīng)用一下了。
了解動畫
過山車路徑由三部分組成：
- 滑動部分
- 循環(huán)部分
- 還會有一些動畫，在上面的兩個動畫之間創(chuàng)造水平空間
我們將首先創(chuàng)建一個簡單的球，作為我們過山車的 "車"。
hmtl 部分：
css 部分：
.cart {
background-color: rgb(100, 210, 128);
height: 50px;
width: 50px;
border: 1px solid black;
border-radius: 50px;
position: absolute;
left: 10vw;
top: 30vh;
}
滑動部分
創(chuàng)建小球滑動的部分可以用cubic-bezier函數(shù)來完成! 這個動畫是由2個動畫組成的，一個是沿x軸的動畫，另一個是沿y軸的動畫。X軸動畫是一個沿X軸的普通線性動畫。它的關(guān)鍵幀如下:
@keyframes x {
to {
left: 40vw;
}
將其添加到球路徑的 animation 屬性中，如下所示
animation: x 4s linear forwards
y軸動畫是我們將使用cubic-bezier函數(shù)的部分。首先定義動畫的關(guān)鍵幀。我們希望起始點(diǎn)和結(jié)束點(diǎn)之間的差異很小，以至于球達(dá)到的高度幾乎相同。
@keyframes y {
to {
top: 29.99vh;
}
}}
現(xiàn)在讓我們來思考一下cubic-bezier函數(shù)。我們希望我們的路徑先向右緩慢移動，然后當(dāng)它滑動時，它應(yīng)該走得更快。
- 向右緩慢移動意味著$P1$將沿x軸移動。所以，我們知道它是在（V，0）。
- 我們需要選擇一個合適的V，使我們的動畫緩慢地向右移動，但又不能太多，以免占用整個空間。在這種情況下，我發(fā)現(xiàn)0.55最適合。
- 為了達(dá)到滑動效果，我們需要將P2向Y軸下移（負(fù)值），所以P2=（X，-Y）。
Y應(yīng)該是一個大值。在這種情況下，我選擇Y=5000。
為了得到X，我們知道我們的動畫速度在滑動時應(yīng)該更快，在再次上升時應(yīng)該更慢。所以，X越接近于零，動畫在滑動時就越陡峭。在這種情況下，讓X = 0.8。
現(xiàn)在，我們得到了一個cubic-bezier函數(shù)：
cubic-bezier(0.55, 0, 0.2, -800).
為動畫屬性添加關(guān)鍵幀:
animation: x 4s linear forwards,
y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards;
這是我們動畫的第一部分，所以動畫延遲為零。我們應(yīng)該添加一個animation-delay屬性，因?yàn)閺南旅娴膭赢嬮_始，動畫的開始時間將與第一個動畫不同。
animation-delay: 0s, 0s;
地址：https://codepen.io/smashingmag/pen/VwxXBQb
添加水平空間
在做循環(huán)之前，球應(yīng)該沿著??X??軸移動一小會兒，所以兩個動畫之間有空間。
定義關(guān)鍵幀
@keyframes x2 {
to {
left: 50vw;
}
}把它添加到 ??animation??
animation: x 4s linear forwards,
y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards;
這個動畫應(yīng)該在滑動動畫之后開始，而滑動動畫需要4秒，因此，動畫延遲將是4秒。
animation-delay: 0s, 0s, 4s;
地址：https://codepen.io/smashingmag/pen/dyemExY
循環(huán)部分
要在CSS中創(chuàng)建一個圓（循環(huán)），我們需要把圓移到循環(huán)的中心，然后從那里開始做動畫。圓的半徑是100px，所以我們把圓的位置改為top: 20vh（30是期望的半徑（這里是10vh））。然而，這需要在滑動動畫完成后發(fā)生，所以我們將創(chuàng)建另一個持續(xù)時間為0秒的動畫，并添加一個合適的動畫延遲。
關(guān)鍵幀:
@keyframes pointOfCircle {
to {
top: 20vh;
}
}添加到 animation 動畫中：
animation: x 4s linear forwards,
y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards,
pointOfCircle 0s linear forwards;
添加動畫延遲, 4.5s:
animation-delay: 0s, 0s, 4s, 4.5s;
循環(huán)本身
創(chuàng)建一個循環(huán)動畫:
- 創(chuàng)建一個關(guān)鍵幀，將球移回原來的位置，然后旋轉(zhuǎn)球。
@keyframes loop {
from {
transform: rotate(0deg) translateY(10vh) rotate(0deg);
}
to {
transform: rotate(-360deg) translateY(10vh) rotate(360deg);
}
}
添加到 animation 中:
animation: x 4s linear forwards,
y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards,
pointOfCircle 0s linear forwards, loop 3s linear forwards;
添加動畫延遲，這里是4.5s:
animation-delay: 0s, 0s, 4s, 4.5s, 4.5s;
地址：https://codepen.io/smashingmag/pen/mdLxZdR
添加水平空間
快完成了，最后 只需要在動畫之后沿著??x??軸移動球，這樣球就不會像上圖中那樣在循環(huán)之后完全停止。
關(guān)鍵幀:
@keyframes x3 {
to {
left: 70vw;
}
}添加到 animation 中:
animation: x 4s linear forwards,
y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards,
pointOfCircle 0s linear forwards, loop 3s linear forwards,
x3 2s linear forwards;
加上適當(dāng)?shù)难舆t，這里是7.5s:
animation-delay: 0s, 0s, 4s, 4.5s, 4.5s, 7.5s;
地址：https://codepen.io/smashingmag/pen/wvjmLKp
總結(jié)
在本節(jié)中，我們介紹了如何結(jié)合多個關(guān)鍵幀來創(chuàng)建一個復(fù)雜的動畫路徑。我們還介紹了貝塞爾以及如何使用它們來創(chuàng)建你自己的緩動函數(shù)。建議大家自己多多動手，才能更好的掌握 css 動畫。
來源：https://www.smashingmagazine.com/2022/10/advanced-animations-css/
網(wǎng)站題目：如何使用CSS創(chuàng)建高級動畫，這個函數(shù)必須掌握
本文路徑：http://www.dlmjj.cn/article/dpdesog.html
