首先來看一看我之前寫的一個CSS輪播動畫效果，為了讓切換時動畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關(guān)鍵詞，而使用了cubic-bezier(貝塞爾)函數(shù)。

貝塞爾函數(shù)乍一看會讓人困惑摸不著頭腦，但如果使用得當(dāng)，它可以為動畫的用戶體驗增添一種更棒的感覺。

在構(gòu)建這個輪播動畫的時候，我意識到當(dāng)我給一頁添加了顯示的貝塞爾函數(shù)時，它前一頁隱藏的貝塞爾函數(shù)則是反向的。我覺得我們分享這篇文章的內(nèi)容是非常值得的，因為創(chuàng)建一個貝塞爾曲線并反轉(zhuǎn)它可能看起來很棘手，但實際上非常的簡單。

了解基礎(chǔ)的easing

首先，Easing這個詞用來描述元素動畫在時間線上的加速與減速節(jié)奏。我們可以將其繪制成一個圖表，其中x軸是時間，y軸是動畫的進度。linear是沒有加速或減速(一直以相同的速度移動)的圖形，表現(xiàn)在圖上就是一條直線：

非線性的Easing會讓動畫更自然、更逼真。我們可以對CSS中的transition和animation應(yīng)用各種的easing，我們可以將這些值設(shè)置在transition-timing-function或者animation-timing-function屬性上?？偣灿形鍌€關(guān)鍵字可以設(shè)置：

linear – 上面已經(jīng)介紹了

ease-in – 動畫開始時很慢，并隨著它的進行而加速。

ease-out – 動畫開始很快，最后減速。

ease-in-out – 動畫開始緩慢，中間加速，最后減速。

ease – 默認(rèn)值，與ease-in-out的動畫過程相反。

了解cubic-bezier

如果上面介紹的關(guān)鍵字值都不適合我們的動畫，我們可以使用cubic-bezier貝塞爾函數(shù)創(chuàng)建自定義的曲線。下面是一個例子：

.my-element {

animation-name: slide;

animation-duration: 3s;

animation-timing-function: cubic-bezier(0.45, 0.25, 0.60, 0.95);

}

我們可以將這些屬性簡寫為一個，如下所示：

.my-element {

animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95);

}

你會注意到cubic-bezier貝塞爾函數(shù)有四個值。這四個值是繪制曲線所需的兩對坐標(biāo)。這些坐標(biāo)代表什么意思呢？如果你使用過Illustrator，那么控制曲線大小和方向的向量點對你來說就會很熟悉。這就是我們用cubic-bezier貝塞爾函數(shù)繪制曲線所必須的點。

我們并不需要知道貝塞爾曲線背后的所有數(shù)學(xué)知識。因為有大佬為我們創(chuàng)建了方便的工具，例如LeaVerou的cubic-bezier.com，這個網(wǎng)站中我們可以可視化的創(chuàng)建一條貝塞爾曲線并復(fù)制它的坐標(biāo)點值。我的輪播效果的貝塞爾曲線就是用這個工具創(chuàng)建的，它看起來是這樣的：

在這里，可以看到我們需要的兩個點：cubic-bezier(x1, y1, x2, y2)。

在正反兩個方向上應(yīng)用easing

上面的輪播圖中應(yīng)用了正反兩個方向的動畫 - 單擊左箭頭時，當(dāng)前項目向右滑出視圖，同時下一個項目向左滑入；如果點擊右箭頭，就會發(fā)生相反的情況。我最初的假設(shè)是，可以簡單地反轉(zhuǎn)動畫使項目以相反方向滑出，如下所示：

.my-element--reversed {

animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95) reverse;

}

這里有一個問題：給animation添加reverse也反轉(zhuǎn)了easing曲線！所以，現(xiàn)在我的動畫在一個方向看起來很好，但在反方向上是不對的。

下面的演示中，第一個框顯示正方向的動畫，第二個框顯示添加reverse后的情況。

你可以看到這兩個動畫的感覺完全不一樣。第一個盒子在開始加速，并且隨著動畫的進展緩慢地減速，而第二個盒子開始時相當(dāng)緩慢，然后在停止之前有一個加速的過程。

我們有兩種方法來解決這個問題：

創(chuàng)建一個新的keyframe animation來顯示動畫，然后設(shè)置為相同的easing。對于簡單的動畫這樣設(shè)置無可厚非，但是如果遇到復(fù)雜的動畫該怎么辦呢？創(chuàng)建反向的動畫需要做更多的工作，而且很容易出錯。

我們可以使用相同的keyframe animation(并設(shè)置animation-direction:reverse)并反轉(zhuǎn)貝塞爾曲線，這樣就實現(xiàn)了在正反兩個方向上使用同一個easing的效果。這種方法并不難。

反轉(zhuǎn)貝塞爾曲線，對應(yīng)在坐標(biāo)軸中就是將整體圖形旋轉(zhuǎn)180度：

通過簡單的數(shù)學(xué)計算就可以得到反轉(zhuǎn)后的點坐標(biāo)，具體方法是：交換兩個坐標(biāo)點，并將每個值都用1減去。

例如，正方向的坐標(biāo)是：x1, y1, x2, y2

那么，反方向的坐標(biāo)就通過下面的公式得出：(1 - x2), (1 - y2), (1 - x1), (1 - y1)

在下面的演示中，第三個框是我們需要的效果：元素向相反的方向滑動，但是它與正方向的動畫曲線是一樣的。

我們來看看如何計算反向的貝塞爾曲線。

用CSS自定義屬性來計算反向曲線

我們可以使用CSS自定義屬來計算新的曲線！首先將每個值賦給一個變量：

:root {

--x1: 0.45;

--y1: 0.25;

--x2: 0.6;

--y2: 0.95;

--originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));

}

然后我們可以使用這些變量來計算新值：

:root {

--reversedCurve: cubic-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));

}

現(xiàn)在，如果我們對第一組變量做任何的更改，反向曲線點將會被自動計算出來。為了在檢查和調(diào)試代碼時更容易發(fā)現(xiàn)問題，我喜歡將這些新值分配到它們自己的變量中：

:root {

/* 正向原始值 */

--x1: 0.45;

--y1: 0.25;

--x2: 0.6;

--y2: 0.95;

--originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));

/* 反向計算值 */

--x1-r: calc(1 - var(--x2));

--y1-r: calc(1 - var(--y2));

--x2-r: calc(1 - var(--x1));

--y2-r: calc(1 - var(--y1));

--reversedCurve: cubic-bezier(var(--x1-r), var(--y1-r), var(--x2-r), var(--y2-r));

}

現(xiàn)在剩下的就是將新的曲線應(yīng)用到反向動畫中：

.my-element--reversed {

animation: slide 3s var(--reversedCurve) reverse;

}

為了更直觀并切可視化的做到這些，我創(chuàng)建了一個小工具來計算一個貝塞爾曲線的反向值。輸入原始坐標(biāo)值就可以自動獲得反向曲線的值： Reverse cubic-bezier工具

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的贝塞尔曲线工具css,如何反转CSS中的贝塞尔曲线的实现方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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