最新 Safari 更新后，Web 動(dòng)畫 API (WAAPI) 現(xiàn)在已在所有現(xiàn)代瀏覽器（IE 除外）中無需任何標(biāo)志即可支持。這里有一個(gè)方便的示例，您可以檢查您的瀏覽器支持哪些功能。WAAPI 是一種執(zhí)行動(dòng)畫（需要在 JavaScript 中執(zhí)行）的好方法，因?yàn)樗鼘儆谠?API——這意味著它無需任何額外庫(kù)即可工作。如果您完全不了解 WAAPI，這里有一個(gè) Dan Wilson 提供的非常好的入門介紹。

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

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

FLIP 和 WAAPI

WAAPI 使 FLIP 動(dòng)畫變得更容易！

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

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

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

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

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

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

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

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

以下是 WAAPI 版本的概要：

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

FLIP 和 React

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

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

FLIP 動(dòng)畫的魔力在于，元素在瀏覽器有機(jī)會(huì)繪制之前就被轉(zhuǎn)換了。那么我們?nèi)绾卧?React 中知道“繪制前”的時(shí)刻呢？

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

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

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

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

盡管 useEffect 總是運(yùn)行在 useLayoutEffect 之后以及瀏覽器繪制之后，但重要的是我們?cè)诘谝淮武秩竞缶彺嬖氐奈恢煤痛笮?。我們沒有機(jī)會(huì)在第二次渲染中這樣做，因?yàn)?useLayoutEffect 在所有 DOM 更新之后運(yùn)行。但該過程與普通 FLIP 動(dòng)畫基本相同。

注意事項(xiàng)

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

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

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

不必要的渲染

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

布局抖動(dòng)

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

動(dòng)畫取消

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

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

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

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

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

事實(shí)上，官方 React 文檔建議使用 getSnapshotBeforeUpdate，“因?yàn)殇秩倦A段的生命周期（如 render）和提交階段的生命周期（如 getSnapshotBeforeUpdate 和 componentDidUpdate）之間可能存在延遲。”但是，目前還沒有此方法的鉤子對(duì)應(yīng)項(xiàng)。我發(fā)現(xiàn)使用函數(shù)組件的主體就足夠了。

不要與瀏覽器對(duì)抗

我之前說過，但要避免與瀏覽器對(duì)抗，并嘗試使事情以瀏覽器的方式發(fā)生。如果我們需要?jiǎng)赢嫽?jiǎn)單的尺寸更改，那么請(qǐng)考慮 CSS 是否足夠（例如 transform: scale()）。我發(fā)現(xiàn) FLIP 動(dòng)畫最適合瀏覽器確實(shí)無法提供幫助的地方：

• 動(dòng)畫 DOM 位置更改（如上所述）
• 共享布局動(dòng)畫

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

庫(kù)

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

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

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

• Josh W. Comeau 的《動(dòng)畫化不可動(dòng)畫化》
• Paul Lewis 和 Stephen McGruer 的《構(gòu)建高性能展開和折疊動(dòng)畫》
• Matt Perry 的《Magic Motion 內(nèi)部的魔法》
• @keyframers 發(fā)布的推文《從 JavaScript 使用動(dòng)畫 CSS 變量》
• Mariko Kosaka 的《現(xiàn)代 Web 瀏覽器的內(nèi)部一覽（第 3 部分）》
• Alex Holachek 的《在 React 中簡(jiǎn)單地構(gòu)建復(fù)雜的 UI 動(dòng)畫》
• David Khourshid 的《使用 FLIP 技術(shù)動(dòng)畫化布局》
• Kirill Vasiltsov 的《使用 React Hooks 進(jìn)行流暢動(dòng)畫》
• 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動(dòng)畫中的所有內(nèi)容的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！