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

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

讓我們來(lái)看看使用 WAAPI、FLIP 并將其集成到 React 中的交集。但我們首先從不使用 React 開(kāi)始，然后再過(guò)渡到 React。

FLIP 和 WAAPI

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

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

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

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

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

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

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

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

使用 WAAPI 時(shí)，我們不會(huì)遇到這些問(wèn)題。可以使用 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)畫(huà)如何在 React 中工作，重要的是要知道它們如何以及最重要的是為什么它們?cè)诩?JavaScript 中工作?；叵胍幌?FLIP 動(dòng)畫(huà)的構(gòu)成：

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

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

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

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

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

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

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

注意事項(xiàng)

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

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

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

不必要的渲染

我們不能使用 useState 來(lái)緩存大小、位置和動(dòng)畫(huà)對(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à)的上下文中，這意味著避免循環(huán)遍歷元素并使用 getBoundingClientRect 讀取它們的位置，然后立即使用 animate 對(duì)它們進(jìn)行動(dòng)畫(huà)處理。盡可能批量“讀取”和“寫(xiě)入”。這將允許進(jìn)行極其流暢的動(dòng)畫(huà)。

動(dòng)畫(huà)取消

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

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

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

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

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

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

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

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

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

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

庫(kù)

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

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

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

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