React 原生動畫 API 終于來了！是時候和第三方庫說再見了？
React 一直是前端開發者最受歡迎的框架之一。但是 React 的動畫支持似乎一直是個短板。雖然 Vue 和 Svelte 等其他框架相繼推出了便于實現動畫的 API ，React 開發者長期以來不得不依賴于第三方庫，如 Motion for React 和 React Spring 來補足這一缺陷。
圖片
最近，這種情況終于迎來了轉機。React 團隊即將推出了一個名為 <ViewTransition /> 的新動畫 API，它基于瀏覽器最新的 View Transition API 功能，為開發者提供了一種新的在兩個視圖之間實現動畫過渡的方法。這一新特性的發布不僅降低了動畫實現的復雜度，還擴展了 React 原有的功能，使開發者有機會通過更少的代碼實現更流暢的用戶體驗。
視圖過渡 (View Transition)
視圖過渡是一種在網頁之間實現平滑視覺轉換的技術。借助瀏覽器的 View Transition API ，開發者可以讓用戶在多個頁面或單個頁面的不同視圖之間享受流暢、自然的視覺體驗。這項技術尤其對提升網站的視覺吸引力和用戶體驗具有顯著作用，無論是多頁面應用（MPA）還是單頁應用（SPA）都可以受益于此。
圖片
視圖過渡的常見應用：
- 圖片轉換：例如在商品詳情頁上，當用戶點擊縮略圖時，可以實現從小圖到大圖的平滑轉換。
- 導航穩定性：在頁面切換時，固定導航欄保持不變，確保用戶體驗的連貫性。
- 內容動態調整：隨著內容的篩選，網格布局的項目可以平滑移動。
視圖過渡不局限于某一特定框架，它的實現依賴以下基礎：
- 狀態快照：首先，瀏覽器為頁面的當前狀態和目標狀態拍照。
- DOM更新：在抑制重繪的同時，瀏覽器對 DOM 進行必要的更新。
- CSS動畫支持：最終通過 CSS 動畫實現視覺上的平滑過渡。
視圖過渡分為兩種類型：同一文檔視圖轉換和跨文檔視圖轉換。
同一文檔視圖轉換：這種形式常用于SPA項目，適用于在同一頁面內進行視圖更新。例如，可以通過調用document.startViewTransition來觸發這樣的轉換：
function handleClick(e) {
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
document.startViewTransition(() => updateTheDOMSomehow());
}跨文檔視圖轉換：這種轉換用于在MPA項目中實現頁面間的過渡效果。它不需要開發者顯式調用API，當進行同源跨文檔導航時，轉換自動發生。開啟此功能的網頁可以通過以下CSS代碼段進行配置：
@view-transition {
navigation: auto;
}視圖過渡的應用，使得在確保視覺吸引力的同時提升了動態和互動體驗，為現代網頁設計帶來了新的可能性。
為啥選擇 <ViewTransition />？
在前端開發中，實現動畫效果的需求一直都很高，而傳統的實現方法常常面臨許多挑戰。以往的動畫實現通常需要依賴第三方庫，如 Motion for React 或 React Spring，這些庫在一定程度上幫助開發者簡化了動畫的實現，但在性能和靈活性方面仍然有所欠缺。
傳統的動畫實現方法通常需要手動管理動畫狀態和 DOM 更新，這對開發者而言是一項繁重且容易出錯的任務。第三方庫雖然提供了一些便捷的工具和接口，但它們往往引入了額外的代碼依賴，使得項目的體積增大，并可能帶來性能問題。
- 動畫協調復雜：要在不同狀態之間協調動畫效果，開發者需要編寫大量代碼手動處理。
- 性能負擔：較大的庫會影響頁面加載速度，增加首次渲染的時間。
- 交互不靈活：很多庫在處理復雜交互和動畫中斷時力不從心，動畫一旦啟動很難被打斷或調整。
<ViewTransition /> 是一種全新的解決方案，它直接基于瀏覽器的 View Transition API，為開發者提供了一種簡化的方式來實現動畫效果。這一 API 在 React 中得到了很好的集成，具有以下優勢：
- 深度集成：<ViewTransition /> 嵌入React的渲染周期中，可以在 DOM 改變前盡可能晚地觸發視圖過渡，最大限度地保持頁面活躍狀態。
- 響應式更新：僅在異步更新（例如 startTransition 和 <Suspense /> ）時工作，使得狀態更新可以隨時中斷或取消，從而提高了 UI 的響應速度。
- 自動化處理：無需手動為每個動畫元素指定轉換名稱，React 會自動管理，減少了開發者的工作量。
- 性能優化：相比手動操控視圖過渡的方式，<ViewTransition /> 提供了性能更優的解決方案，避免了多余的計算和渲染。
通過引入 <ViewTransition />，React 讓開發者可以更容易地實現復雜、流暢、且響應迅速的動畫效果，為構建現代化、互動式的用戶界面提供了強大的支持。
<ViewTransition /> 使用
<ViewTransition /> 是為了處理異步更新而設計的，比如 startTransition、useDeferredValue 和 <Suspense> 等場景。通過這些機制，視圖過渡可以在頁面狀態異步更新時被觸發，帶來自然流暢的動畫效果。然而，如果是同步更新，那么默認不會觸發視圖過渡，這意味著UI更新是立即提交的，無法通過 <ViewTransition /> 控制其動畫。
<ViewTransition /> 組件可以像 DOM 片段一樣，將其子組件的過渡效果在獨立的快照中實現。其用法非常簡單，只需將需要過渡的組件用 <ViewTransition> 包裹即可：
import { ViewTransition } from 'react';
<ViewTransition><Component /></ViewTransition>默認情況下，name='auto'，這會自動為包裹的子節點分配一個 view-transition-name，無需手動控制DOM節點的樣式。
此外，<ViewTransition /> 提供了簡潔直觀的應用方式，比如條件渲染（condition ? <ComponentA /> : <ComponentB />）可以實現組件切換之間的交叉淡入淡出效果。類似的，在 <Suspense> 中使用時，也可以實現從后備加載骨架屏轉變為正式內容的流暢過渡：
<ViewTransition>
<Suspense fallback={<Skeleton />}>
<Content />
</Suspense>
</ViewTransition>而相較之下，如果在 <Suspense> 中單獨包裹 <ViewTransition>，則會分別觸發出入場效果：
<Suspense fallback={<ViewTransition><Skeleton /></ViewTransition>}>
<ViewTransition><Content /></ViewTransition>
</Suspense><ViewTransition /> 高級功能
<ViewTransition /> 為開發者提供了多個高級功能，讓動畫的實現更為靈活和強大。
組件切換及動畫：
在使用 <ViewTransition /> 時，不僅可以實現組件狀態下的動畫，還可以在兩個不同組件之間切換時，完成自然的淡入淡出。例如：
<ViewTransition>
{state ? <MenuA /> : <MenuB />}
</ViewTransition>上述代碼可以在 MenuA 和 MenuB 之間切換時自動交叉淡出過渡，從而提升用戶體驗。
共享元素動畫的實現：當需要在不同視圖之間共享元素動畫時，<ViewTransition /> 也可以通過命名來支持。例如：
{isSelected && (
<ViewTransition name='underline'>
<Underline />
</ViewTransition>
)}當一個元素從一個位置移除并在另一個位置創建時，只需確保名稱匹配，即可實現共享動畫。這種功能可以防止元素在屏幕上隨意移動，為用戶提供更一致的表現。
自定義動畫：對于更復雜的動畫需求，<ViewTransition /> 提供了事件處理器來進行自定義。例如：
- onEnter / onLeave: 在組件進入或離開DOM時觸發。
- onLayout: 由于外部組件的影響，該組件的邊界發生變化。
- onUpdate: 組件的內容或邊界由于自身或子組件的影響發生變化。
- onShare: 實施共享元素過渡時觸發。
這些事件處理器為開發者提供了更多的自定義空間，通過這些事件，開發者可以充分利用Web動畫API來創建復雜的動畫效果，譬如利用 clipPath 動畫創建遮罩效果。
通過這些功能，<ViewTransition /> 不僅提高了動畫的可控性，也使得復雜的 UI 交互得以更流暢地實現。這一組件給開發者帶來了更多可能性，使動畫不僅限于簡單的過渡，而可以成為界面交互中自然的一部分。
這個網站中還有一些關于 ViewTransition 的使用示例，大家可以仔細探索：https://react-view-transition-examples.motion.dev/
一些實踐經驗
使用 <ViewTransition /> 實現動畫，有一些最佳實踐可以幫助開發者更好地管理過渡效果，提高應用的性能和用戶體驗。
合理管理視圖過渡：
- 明確過渡邊界：在使用動畫時，應該合理界定過渡的范圍。僅對需要關注的元素添加動畫，而非全局應用，這樣可以提高動畫的性能并讓用戶注意力集中在關鍵信息上。
- 僅在必要時啟動動畫：確保只在必須時才觸發視圖過渡。這可以通過條件渲染或異步觸發機制來實現，避免不必要的動畫對頁面交互產生干擾。
- 使用顯式命名來管理共享動畫：在實現共享元素動畫的時候，盡量使用顯式命名來標識不同動畫片段。這有助于避免命名沖突，提高動畫管理的可讀性和可維護性。
注意事項：
- 理解異步特點：<ViewTransition /> 依賴于異步更新來觸發動畫，而非同步操作。因此在開發中應理解和把握異步更新機制，如 startTransition 和 <Suspense /> 等，確保動畫流暢執行。
- 避免大范圍DOM更新：在視圖過渡期間，盡量避免對DOM進行大范圍修改。大量的DOM更改可能會導致動畫卡頓，使過渡效果不流暢。
- 仔細調試動畫：在應用 <ViewTransition /> 制作精細動畫時，一定要進行充分的調試，以確保所有的動畫切換和視覺效果都精準無誤。可以利用瀏覽器的開發者工具來逐幀檢查動畫細節。
- 優化動畫性能：為優化動畫性能，盡量在動畫過程中使用硬件加速的CSS屬性（如 transform 和 opacity），這些屬性能夠高效地降低動畫開銷。
<ViewTransition /> 和 Motion 的比較
<ViewTransition /> 的特點在于其依賴異步更新機制，通過 startTransition 和 <Suspense /> 實現流暢的視圖切換。它提供了一種簡單方法來處理元素在視圖狀態變化間的過渡，使得切換過程自然且不打斷用戶交互。主要用于全局的視圖切換，支持更復雜的共享元素動畫。
而 Motion 是 React 社區中廣泛使用的動畫庫，擅長于處理微交互。它允許更精細的動畫控制，如縮放、旋轉、平移等，并能處理相對和嵌套動畫。這些動畫可被中斷，對于小型動畫和組件加載時的動畫會更為合適。
Motion 能夠更加定制化動畫效果，通過計算轉換和比例失真校正實現視覺上的平滑過渡。盡管如此，它在處理大型視圖改變時可能不如 <ViewTransition /> 高效。
如何讓動畫在復雜應用中更加流暢與易控：
- 結合使用：在復雜應用中，不妨考慮同時使用 <ViewTransition /> 和 Motion。前者用以全局視圖的切換，后者用于細化特定組件上的微交互動畫。
- 腳本化API：使用Motion時，可以利用其腳本化API構建更復雜的交互過程。對于 <ViewTransition />，則可以利用其自動化和簡單設置更快速地實現過渡效果。
- 優化性能：在應用中實施動畫時，始終記得性能優化。避免在主線程處理密集型任務，合理使用CSS硬件加速屬性，確保用戶界面響應迅速。
目前這個組件尚未發布到正式環境，還在實驗階段，未來可能還會發生變化，大家在生產環境謹慎使用。
