在處理複雜的CSS動(dòng)畫(huà)時(shí)，傾向於創(chuàng)建帶有許多聲明的擴(kuò)展@KeyFrames。我想談?wù)摰囊恍┘记煽赡苡兄妒故虑樽兊酶菀祝瑫r(shí)留在香草CSS中：

1. 多個(gè)動(dòng)畫(huà)
2. 正時(shí)功能

第一個(gè)是更廣泛的使用和熟悉的，但第二個(gè)不太常見(jiàn)。可能有充分的理由 - 逗號(hào)的鏈接動(dòng)畫(huà)比起我們可用的各種定時(shí)功能及其所做的工作要容易得多。有一個(gè)特別整潔的時(shí)序功能，可以使我們完全控制自定義的計(jì)時(shí)功能。那將是立方體bezier（），在這篇文章中，我將向您展示它的力量，以及如何使用它來(lái)創(chuàng)建精美的動(dòng)畫(huà)而無(wú)需過(guò)多複雜。

讓我們從一個(gè)基本示例開(kāi)始，顯示我們?nèi)绾我杂腥さ姆较蛞苿?dòng)球，例如無(wú)窮大（∞）形狀：

如您所見(jiàn)，沒(méi)有復(fù)雜的代碼 - 只有兩個(gè)關(guān)鍵幀和一個(gè)Cubbezier（）函數(shù)。然而，我們得到的是一個(gè)相當(dāng)複雜的最終無(wú)限形狀動(dòng)畫(huà)。

酷，對(duì)吧？讓我們深入研究！

Cupic-Bezier（）函數(shù)

讓我們從官方定義開(kāi)始：

立方貝齊爾寬鬆函數(shù)是一種由四個(gè)實(shí)數(shù)定義的寬鬆函數(shù)，該函數(shù)分別指定了一個(gè)CubicBézier曲線的兩個(gè)控制點(diǎn)P1和P2，其端點(diǎn)P0和P3分別固定為（0，0）和（1，1，1）。 P1和P2的X坐標(biāo)僅限於[0，1]的範(fàn)圍。

上面的曲線定義了輸出（y軸）如何基於時(shí)間（x軸）的行為。每個(gè)軸的範(fàn)圍為[0，1]（或[0％100％]）。如果我們有一個(gè)持續(xù)兩秒鐘（2s）的動(dòng)畫(huà)，那麼：

 0（0％）= 0s 
1（100％）= 2s

如果我們想從5px到20px動(dòng)畫(huà)，那麼：

 0（0％）= 5px 
1（100％）= 20px

X，時(shí)間始終僅限於[0 1]；但是，輸出可以超越[0 1]。

我的目標(biāo)是調(diào)整P1和P2，以創(chuàng)建以下曲線：

您可能會(huì)認(rèn)為這是不可能實(shí)現(xiàn)的，因?yàn)槿缍x所述，P0和P3在（0,0）和（1,1）固定在（1,1）中，這意味著它們不能在同一軸上。的確如此，我們將使用一些數(shù)學(xué)技巧來(lái)“近似”它們。

拋物線曲線

讓我們從以下定義開(kāi)始：Cubic-Bezier（0,1.5,1,1.5）。這給了我們以下曲線：

我們的目標(biāo)是移動(dòng)（1,1），並以（0,1）的形式搬遷，這在技術(shù)上是不可能的。因此，我們將嘗試偽造它。

我們先前說(shuō)過(guò)，我們的範(fàn)圍是[0 1]（或[0％100％]），因此讓我們想像一下，當(dāng)0％非常接近100％時(shí)。例如，如果我們希望將20px（0％）至20.1px（100％）的頂部動(dòng)畫(huà)起來(lái)，那麼我們可以說(shuō)初始狀態(tài)和最終狀態(tài)都是相等的。

嗯，但是我們的元素根本不會(huì)移動(dòng)，對(duì)嗎？

好吧，它會(huì)移動(dòng)一點(diǎn)，因?yàn)閥值超過(guò)20.1px（100％）。但這還不足以給我們帶來(lái)明顯的運(yùn)動(dòng)：

讓我們更新曲線，然後使用Cupic-Bezier（0,4,1,4）。注意我們的曲線比以前高：

但是，即使最高值越過(guò)3（或300％），但仍然沒(méi)有運(yùn)動(dòng)。讓我們嘗試立方體bezier（0,20,1,20）：

是的！它開(kāi)始移動(dòng)一點(diǎn)。您是否每次提高價(jià)值時(shí)都注意到曲線的演變？當(dāng)我們放大以查看完整曲線時(shí)，這使我們的觀點(diǎn)（1,1）更接近（0,1），這是訣竅。

通過(guò)使用Cutic-Bezier（0，V，1，V），其中V具有很大的值，並且初始狀態(tài)和最終狀態(tài)都非常近（或幾乎相等），我們可以模擬拋物線曲線。

一個(gè)例子值得一千個(gè)字：

我將“魔術(shù)”立方呈現(xiàn)功能應(yīng)用於頂部動(dòng)畫(huà)，以及在左側(cè)應(yīng)用的線性動(dòng)畫(huà)。這為我們提供了想要的曲線。

挖掘數(shù)學(xué)

對(duì)於那些以數(shù)學(xué)意識(shí)的人來(lái)說(shuō)，我們可以進(jìn)一步打破這一解釋?？梢允褂靡韵鹿絹?lái)定義立方體bezier：

 p =（1 -t）3p03（1 -t）2TP13（1 -t）t第一p2t3p3

每個(gè)點(diǎn)的定義如下：p0 =（0,0），p1 =（0，v），p2 =（1，v）和p3 =（1,1）。

這為我們提供了X和Y坐標(biāo)的兩個(gè)功能：

• x（t）= 3（1 -t）t2T3=3t2 -2t3
• y（t）= 3（1 -t）2TV3（1 -t）t2vt3=t3 -3vt23vt

V是我們的最大價(jià)值，T在[0 1]範(fàn)圍內(nèi)。如果我們考慮上一個(gè)示例，y（t）將為我們提供頂部的價(jià)值，而x（t）是時(shí)間進(jìn)度。點(diǎn)（x（t），y（t））然後將定義我們的曲線。

讓我們找到y(tǒng)（t）的最大值。為此，我們需要找到將為我們提供y'（t）= 0的t值（當(dāng)導(dǎo)數(shù)等於0時(shí)）：

 y'（t）=3T2 -6VT 3V

y'（t）= 0是二次方程。我將跳過(guò)無(wú)聊的部分，並為您提供結(jié)果，即t = v -sqrt（v2 -v）。

當(dāng)V為較大的值時(shí)，t將等於0.5。因此，y（0.5）= max和x（0.5）等於0.5。這意味著我們?cè)趧?dòng)畫(huà)中的中途達(dá)到最大值，這符合我們想要的拋物線曲線。

另外，y（0.5）將為我們提供（1 6V）/8，這將使我們能夠基於V。我們始終使用V的最大值，因此我們可以簡(jiǎn)化為6V/8 = 0.75V。

我們?cè)谏弦粋€(gè)示例中使用了v = 500，因此那裡的最大值將達(dá)到375（或37500％），我們得到以下內(nèi)容：

• 初始狀態(tài)（0）：頂部：200px
• 最終狀態(tài)（1）：頂部：199.5px

在0到1之間的差異為-0.5px。讓我們稱其為增量。對(duì)於375（或37500％），我們的方程為375*-0.5px = -187.5px。我們的動(dòng)畫(huà)元素達(dá)到頂部：12.5px（200px -187.5px），並為我們提供以下動(dòng)畫(huà)：

頂部：200px（時(shí)間為0％）→頂部：12.5px（時(shí)間為50％）→頂部：199.5px（在100％的時(shí)間為100％） 

或者，以另一種方式表示：

頂部：200px（0％）→頂部：12.5px（50％）→頂部：200px（100％）

讓我們做相反的邏輯。我們應(yīng)該使用什麼值來(lái)使元素達(dá)到頂部：0px？動(dòng)畫(huà)將為200px→0px→199.5px，因此我們需要-200px才能達(dá)到0px。我們的增量始終等於-0.5px。最大值將等於200/0.5 = 400，因此0.75V = 400，表示V = 533.33。

我們的元素正在觸及頂部！

這是一個(gè)總結(jié)我們剛剛完成的數(shù)學(xué)的數(shù)字：

正弦曲線

我們將使用幾乎完全相同的技巧來(lái)創(chuàng)建正弦曲線，但具有不同的公式。這次，我們將使用立方體bezier（0.5，V，0.5，-v）

像以前一樣，讓我們??看看曲線在增加價(jià)值時(shí)會(huì)如何發(fā)展：

我認(rèn)為您現(xiàn)在可能已經(jīng)明白了。使用v的大價(jià)值使我們接近正弦曲線。

這是另一個(gè)具有連續(xù)動(dòng)畫(huà)的動(dòng)畫(huà) - 真正的正弦動(dòng)畫(huà)！

數(shù)學(xué)

讓我們來(lái)數(shù)學(xué)吧！與以前相同的公式填充，我們將獲得以下功能：

• x（t）= 3/2（1 -t）2T3/2（1 -t）t2T3=（3/2）t - （3/2）t2T3
• y（t）= 3（1 -t）2TV -3（1 -t）t2vt3=（6v 1）t3 -9vt23vt

這次我們需要找到y(tǒng)（t）的最小值和最大值。 y'（t）= 0將為我們提供兩個(gè)解決方案。解決此問(wèn)題之後：

 y'（t）= 3（6v 1）t2 -18vt 3v = 0

…我們得到：

• t'=（3v sqrt（3v2 -v））/（6v 1）
• t''=（3v -sqrt（3v2 -v））/（6v 1）

對(duì)於V的很大價(jià)值，我們具有t'= 0.211和t“ = 0.789。這意味著y（0.211）= max and y（0.789）= min。這也意味著x（0.211）= 0.26和x（0.789）= 0.74。

Y（0.211）等於0.289V和Y（0.789）至-0.289V?？紤]到V非常大，我們得到了一些舍入的價(jià)值。

我們的正弦曲線還應(yīng)在一半時(shí)間（或x（t）= 0.5）的x軸（或y（t）= 0）穿越x軸（或y（t）= 0）。為了證明這一點(diǎn)，我們使用y（t）的第二個(gè)衍生物 - 應(yīng)等於0-因此，y''（t）= 0。

 y''（t）= 6（6v 1）t -18v = 0

解決方案為3V/（6V 1），對(duì)於大V值，解決方案為0.5。這給我們y（0.5）= 0和x（0.5）= 0.5，這證實(shí)了我們的曲線交叉（0.5,0）點(diǎn)。

現(xiàn)在，讓我們考慮上一個(gè)示例，然後嘗試找到V的值，該值使我們回到頂部：0％。我們有：

• 初始狀態(tài)（0）：頂部：50％
• 最終狀態(tài)（1）：頂部：49.9％
• 增量：-0.1％

我們需要-50％才能達(dá)到頂部：0％，因此0.289V*-0.1％= -50％，這使我們v = 1730.10。

如您所見(jiàn)，我們的元素正在觸摸頂部並在底部消失，因?yàn)槲覀冇幸韵聞?dòng)畫(huà)：

頂部：50％→頂部：0％→頂部：50％→頂部：100％→頂部：50％→等等...

總結(jié)計(jì)算的數(shù)字：

以及一個(gè)一起說(shuō)明所有曲線的示例：

是的，您會(huì)看到四個(gè)曲線！如果仔細(xì)觀察，您會(huì)注意到我使用的是兩個(gè)不同的動(dòng)畫(huà)，一個(gè)將達(dá)到49.9％（增量為-0.01％），另一個(gè)將達(dá)到50.1％（增量為0.01％）。通過(guò)更改增量的符號(hào)，我們控製曲線的方向。我們還可以控制立方bezier的其他參數(shù)（不是應(yīng)保持大價(jià)值的V），以從相同的曲線中創(chuàng)建更多變化。

在下面，一個(gè)互動(dòng)演示：

回到我們的例子

讓我們回到我們最初以無(wú)限符號(hào)形狀移動(dòng)的球的最初示例。我只是將兩個(gè)正弦動(dòng)畫(huà)結(jié)合起來(lái)，使其起作用。

如果我們將以前所做的工作與多個(gè)動(dòng)畫(huà)的概念結(jié)合在一起，我們就會(huì)獲得驚人的結(jié)果。這再次是最初的示例，這次是交互式演示。改變價(jià)值並看到魔術(shù)：

讓我們走得更遠(yuǎn)，在混合物中加入一點(diǎn)CSS Houdini。多虧了@property，我們可以為複雜的轉(zhuǎn)換聲明動(dòng)畫(huà)（但目前CSS Houdini僅限於Chrome和Edge支持）。

您可以用什麼樣的圖紙？這是我能夠製作的一些：

這是一個(gè)動(dòng)畫(huà)：

還有一個(gè)沒(méi)有CSS Houdini的版本：

從這些示例中可以看出一些事情：

• 每個(gè)密鑰幀僅使用一個(gè)包含增量的聲明來(lái)定義。
• 元素和動(dòng)畫(huà)的位置是獨(dú)立的。我們可以輕鬆地將元素放置在任何地方，而無(wú)需調(diào)整動(dòng)畫(huà)。
• 我們沒(méi)有進(jìn)行計(jì)算。沒(méi)有大量的角度或像素值。我們只需要在密鑰幀中一個(gè)很小的值，並且在Cux-Bezier（）函數(shù)中需要一個(gè)大價(jià)值。
• 整個(gè)動(dòng)畫(huà)只能通過(guò)調(diào)整持續(xù)時(shí)間值來(lái)控制。

那過(guò)渡呢？

同一技術(shù)也可以與CSS過(guò)渡屬性一起使用，因?yàn)樗诙〞r(shí)功能時(shí)遵循相同的邏輯。這很棒，因?yàn)樵趧?chuàng)建一些複雜的懸停效果時(shí)，我們能夠避免使用密鑰幀。

這是我沒(méi)有密鑰幀的方法：

馬里奧（Mario）借助拋物線曲線了。我們根本不需要鑰匙幀就可以在懸停的搖動(dòng)動(dòng)畫(huà)上創(chuàng)建動(dòng)畫(huà)。正弦曲線完全有能力完成所有工作。

這是Mario的另一個(gè)版本，這次是使用CSS Houdini。而且，是的，由於拋物線曲線，他仍在跳躍：

為了良好的衡量，這裡是沒(méi)有密鑰幀的更精美的懸停效果（同樣，僅鍍鉻和邊緣）：

就是這樣！

現(xiàn)在，您有了一些魔術(shù)立方體（）曲線曲線以及它們背後的數(shù)學(xué)。當(dāng)然，好處是這樣的自定義定時(shí)功能使我們可以在沒(méi)有我們通常可以遇到的複雜關(guān)鍵框架的情況下進(jìn)行精美的動(dòng)畫(huà)。

我知道並非每個(gè)人都有數(shù)學(xué)意識(shí)，沒(méi)關(guān)係。有一些可以提供幫助的工具，例如Matthew Lein的Ceaser，它使您可以將曲線點(diǎn)拖動(dòng)以獲取所需的東西。而且，如果您還沒(méi)有書(shū)籤，Cupic-bezier.com是另一個(gè)。如果您想在CSS世界之外與Cupic-Bezier一起玩，我建議您在這裡看到一些數(shù)學(xué)公式。

無(wú)論您如何獲得立方bezier（）值，希望現(xiàn)在您對(duì)它們的力量以及它們?nèi)绾螏椭诖诉^(guò)程中製作更好的代碼。

以上是使用Cupic-Bezier（）高級(jí)CSS動(dòng)畫(huà)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！