您需要了解的有關Flip動畫的所有內容

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

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

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

FLIP 和WAAPI

WAAPI 使FLIP 動畫變得更容易！

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

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

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

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

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

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

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

使用WAAPI 時，我們不會遇到這些問題。可以使用reverse 函數輕鬆地進行反轉。子級的反向縮放也是可能的。當出現錯誤時，很容易查明確切的罪魁禍首，因為我們只使用簡單的函數，例如animate 和reverse，而不是像requestAnimationFrame 方法那樣梳理各種內容。

以下是WAAPI 版本的概要：

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

FLIP 和React

要了解FLIP 動畫如何在React 中工作，重要的是要知道它們如何以及最重要的是為什麼它們在純JavaScript 中工作。回想一下FLIP 動畫的構成：

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

FLIP 動畫的魔力在於，元素在瀏覽器有機會繪製之前就被轉換了。那麼我們如何在React 中知道“繪製前”的時刻呢？

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

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

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

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

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

注意事項

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

保持在100 毫秒以內

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

不必要的渲染

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

佈局抖動

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

動畫取消

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

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

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

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

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

事實上，官方React 文檔建議使用getSnapshotBeforeUpdate ，“因為渲染階段的生命週期（如render ）和提交階段的生命週期（如getSnapshotBeforeUpdate和componentDidUpdate ）之間可能存在延遲。”但是，目前還沒有此方法的鉤子對應項。我發現使用函數組件的主體就足夠了。

不要與瀏覽器對抗

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

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

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

庫

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

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

資源和參考文獻

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

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.

以上是您需要了解的有關Flip動畫的所有內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！