最新Safari 更新後，Web 動畫API (WAAPI) 現(xiàn)在已在所有現(xiàn)代瀏覽器（IE 除外）中無需任何標(biāo)誌即可支持。這裡有一個方便的示例，您可以檢查您的瀏覽器支持哪些功能。 WAAPI 是一種執(zhí)行動畫（需要在JavaScript 中執(zhí)行）的好方法，因為它屬於原生API——這意味著它無需任何額外庫即可工作。如果您完全不了解WAAPI，這裡有一個Dan Wilson 提供的非常好的入門介紹。

FLIP 是最有效的動畫方法之一。 FLIP 需要一些JavaScript 代碼才能運(yùn)行。

讓我們來看看使用WAAPI、FLIP 並將其集成到React 中的交集。但我們首先從不使用React 開始，然後再過渡到React。

FLIP 和WAAPI

WAAPI 使FLIP 動畫變得更容易！

FLIP 快速回顧：其核心思想是首先將元素放置在您想要它結(jié)束的位置。接下來，應(yīng)用轉(zhuǎn)換將其移動到起始位置。然後取消這些轉(zhuǎn)換。

動畫轉(zhuǎn)換非常高效，因此FLIP 非常高效。在WAAPI 之前，我們必須直接操作元素的樣式來設(shè)置轉(zhuǎn)換，並等待下一幀來取消/反轉(zhuǎn)它：

 // WAAPI 之前的FLIP
el.style.transform = `translateY(200px)`;

requestAnimationFrame(() => {
  el.style.transform = '';
});

許多庫都是基於這種方法構(gòu)建的。但是，這存在幾個問題：

• 一切都感覺像是一個巨大的hack。
• 反轉(zhuǎn)FLIP 動畫極其困難。雖然一旦刪除類，CSS 轉(zhuǎn)換會“免費(fèi)”反轉(zhuǎn)，但這裡並非如此。在之前的動畫運(yùn)行時啟動新的FLIP 會導(dǎo)致故障。反轉(zhuǎn)需要使用getComputedStyles 解析轉(zhuǎn)換矩陣並使用它來計算當(dāng)前尺寸，然後再設(shè)置新的動畫。
• 高級動畫幾乎是不可能的。例如，為了防止扭曲縮放父級的子級，我們需要在每一幀訪問當(dāng)前縮放值。這只能通過解析轉(zhuǎn)換矩陣來完成。
• 瀏覽器有很多需要注意的地方。例如，有時要在Firefox 中完美地運(yùn)行FLIP 動畫，需要調(diào)用兩次requestAnimationFrame：

 requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    el.style.transform = '';
  });
});

使用WAAPI 時，我們不會遇到這些問題?？梢允褂胷everse 函數(shù)輕鬆地進(jìn)行反轉(zhuǎn)。子級的反向縮放也是可能的。當(dāng)出現(xiàn)錯誤時，很容易查明確切的罪魁禍?zhǔn)祝驗槲覀冎皇褂煤唵蔚暮瘮?shù)，例如animate 和reverse，而不是像requestAnimationFrame 方法那樣梳理各種內(nèi)容。

以下是WAAPI 版本的概要：

 el.classList.toggle('someclass');
const keyframes = /* 計算大小/位置差異*/;
el.animate(keyframes, 2000);

FLIP 和React

要了解FLIP 動畫如何在React 中工作，重要的是要知道它們如何以及最重要的是為什麼它們在純JavaScript 中工作?；叵胍幌翭LIP 動畫的構(gòu)成：

所有具有紫色背景的內(nèi)容都需要在渲染的“繪製”步驟之前發(fā)生。否則，我們會看到新樣式短暫閃爍，這不好。在React 中情況會變得稍微複雜一些，因為所有DOM 更新都是由我們完成的。

FLIP 動畫的魔力在於，元素在瀏覽器有機(jī)會繪製之前就被轉(zhuǎn)換了。那麼我們?nèi)绾卧赗eact 中知道“繪製前”的時刻呢？

讓我們來了解一下useLayoutEffect鉤子。如果您想知道它是什麼……這就是它！我們在這個回調(diào)中傳遞的任何內(nèi)容都會在DOM 更新之後但在繪製之前同步發(fā)生。換句話說，這是一個設(shè)置FLIP 的好地方！

讓我們做一些FLIP 技術(shù)非常擅長的事情：動畫DOM 位置。如果我們想動畫化元素如何從一個DOM 位置移動到另一個DOM 位置，CSS 就無能為力。 （想像一下完成待辦事項列表中的任務(wù)並將其移動到“已完成”任務(wù)列表中，就像您單擊下面示例中的項目一樣。）

讓我們來看一個最簡單的例子。單擊以下示例中的兩個方塊中的任何一個都會使它們交換位置。如果沒有FLIP，它會立即發(fā)生。

有很多事情要做。請注意所有工作是如何在生命週期鉤子回調(diào)內(nèi)發(fā)生的： useEffect和useLayoutEffect 。讓它有點令人困惑的是，我們的FLIP 動畫的時間線從代碼本身並不明顯，因為它發(fā)生在兩個React 渲染中。以下是React FLIP 動畫的構(gòu)成，以顯示不同的操作順序：

儘管useEffect總是運(yùn)行在useLayoutEffect之後以及瀏覽器繪製之後，但重要的是我們在第一次渲染後緩存元素的位置和大小。我們沒有機(jī)會在第二次渲染中這樣做，因為useLayoutEffect在所有DOM 更新之後運(yùn)行。但該過程與普通FLIP 動畫基本相同。

注意事項

像大多數(shù)事情一樣，在React 中使用FLIP 時，也有一些注意事項需要考慮。

保持在100 毫秒以內(nèi)

FLIP 動畫是計算。計算需要時間，在您可以顯示流暢的60fps 轉(zhuǎn)換之前，您需要做相當(dāng)多的工作。如果延遲低於100 毫秒，人們就不會注意到延遲，因此請確保所有內(nèi)容都低於此值。 DevTools 中的“性能”選項卡是檢查此內(nèi)容的好地方。

不必要的渲染

我們不能使用useState來緩存大小、位置和動畫對象，因為每個setState都會導(dǎo)致不必要的渲染並減慢應(yīng)用程序速度。在最壞的情況下，它甚至?xí)?dǎo)致錯誤。嘗試改為使用useRef ，並將其視為一個可以在不渲染任何內(nèi)容的情況下被修改的對象。

佈局抖動

避免反復(fù)觸發(fā)瀏覽器佈局。在FLIP 動畫的上下文中，這意味著避免循環(huán)遍曆元素並使用getBoundingClientRect讀取它們的位置，然後立即使用animate對它們進(jìn)行動畫處理。盡可能批量“讀取”和“寫入”。這將允許進(jìn)行極其流暢的動畫。

動畫取消

嘗試在它們移動時隨機(jī)單擊前面的演示中的方塊，然後在它們停止後再次單擊。您將看到故障。在現(xiàn)實生活中，用戶會在元素移動時與它們交互，因此值得確保它們被平滑地取消、暫停和更新。

但是，並非所有動畫都可以使用reverse反轉(zhuǎn)。有時，我們希望它們停止然後移動到新的位置（例如，當(dāng)隨機(jī)打亂元素列表時）。在這種情況下，我們需要：

• 獲取正在移動元素的大小/位置
• 完成當(dāng)前動畫
• 計算新的尺寸和位置差異
• 啟動新的動畫

在React 中，這比看起來要難。我浪費(fèi)了很多時間來努力解決這個問題。必須緩存當(dāng)前動畫對象。一個好方法是創(chuàng)建一個Map，以便通過ID 獲取動畫。然後，我們需要獲取正在移動元素的大小和位置。有兩種方法可以做到這一點：

1. 使用函數(shù)組件：只需在函數(shù)的主體中循環(huán)遍歷每個動畫元素並緩存當(dāng)前位置即可。
2. 使用類組件：使用getSnapshotBeforeUpdate生命週期方法。

事實上，官方React 文檔建議使用getSnapshotBeforeUpdate ，“因為渲染階段的生命週期（如render ）和提交階段的生命週期（如getSnapshotBeforeUpdate和componentDidUpdate ）之間可能存在延遲?！钡牵壳斑€沒有此方法的鉤子對應(yīng)項。我發(fā)現(xiàn)使用函數(shù)組件的主體就足夠了。

不要與瀏覽器對抗

我之前說過，但要避免與瀏覽器對抗，並嘗試使事情以瀏覽器的方式發(fā)生。如果我們需要動畫化簡單的尺寸更改，那麼請考慮CSS 是否足夠（例如transform: scale() ）。我發(fā)現(xiàn)FLIP 動畫最適合瀏覽器確實無法提供幫助的地方：

• 動畫DOM 位置更改（如上所述）
• 共享佈局動畫

第二個是第一個的更複雜版本。有兩個DOM 元素充當(dāng)一個整體並改變其位置（而另一個被卸載/隱藏）。這種技巧可以實現(xiàn)一些很酷的動畫。例如，這個動畫是用我構(gòu)建的名為react-easy-flip 的庫製作的，該庫使用了這種方法：

庫

有很多庫可以使React 中的FLIP 動畫更容易並抽像出樣板代碼。目前積極維護(hù)的庫包括： react-flip-toolkit和我的庫react-easy-flip 。

如果您不介意更重但能夠進(jìn)行更通用動畫的內(nèi)容，請查看framer-motion 。它還可以進(jìn)行很酷的共享佈局動畫！有一個視頻深入探討了該庫。

資源和參考文獻(xiàn)

• Josh W. Comeau 的《動畫化不可動畫化》
• Paul Lewis 和Stephen McGruer 的《構(gòu)建高性能展開和折疊動畫》
• Matt Perry 的《Magic Motion 內(nèi)部的魔法》
• @keyframers 發(fā)布的推文《從JavaScript 使用動畫CSS 變量》
• Mariko Kosaka 的《現(xiàn)代Web 瀏覽器的內(nèi)部一覽（第3 部分）》
• Alex Holachek 的《在React 中簡單地構(gòu)建複雜的UI 動畫》
• David Khourshid 的《使用FLIP 技術(shù)動畫化佈局》
• Kirill Vasiltsov 的《使用React Hooks 進(jìn)行流暢動畫》
• Jayant Bhawal 的《使用React Hooks 進(jìn)行共享元素轉(zhuǎn)換》

This revised output maintains the original image format and placement while paraphrasing the text to create unique content. It also addresses some minor grammatical and stylistic issues.

以上是您需要了解的有關(guān)Flip動畫的所有內(nèi)容的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！