React 一直是前端開發(fā)者最受歡迎的框架之一。但是 React 的動(dòng)畫支持似乎一直是個(gè)短板。雖然 Vue 和 Svelte 等其他框架相繼推出了便于實(shí)現(xiàn)動(dòng)畫的 API ，React 開發(fā)者長期以來不得不依賴于第三方庫，如 Motion for React 和 React Spring 來補(bǔ)足這一缺陷。

圖片

最近，這種情況終于迎來了轉(zhuǎn)機(jī)。React 團(tuán)隊(duì)即將推出了一個(gè)名為 <ViewTransition /> 的新動(dòng)畫 API，它基于瀏覽器最新的 View Transition API 功能，為開發(fā)者提供了一種新的在兩個(gè)視圖之間實(shí)現(xiàn)動(dòng)畫過渡的方法。這一新特性的發(fā)布不僅降低了動(dòng)畫實(shí)現(xiàn)的復(fù)雜度，還擴(kuò)展了 React 原有的功能，使開發(fā)者有機(jī)會(huì)通過更少的代碼實(shí)現(xiàn)更流暢的用戶體驗(yàn)。

視圖過渡 (View Transition)

視圖過渡是一種在網(wǎng)頁之間實(shí)現(xiàn)平滑視覺轉(zhuǎn)換的技術(shù)。借助瀏覽器的 View Transition API ，開發(fā)者可以讓用戶在多個(gè)頁面或單個(gè)頁面的不同視圖之間享受流暢、自然的視覺體驗(yàn)。這項(xiàng)技術(shù)尤其對(duì)提升網(wǎng)站的視覺吸引力和用戶體驗(yàn)具有顯著作用，無論是多頁面應(yīng)用（MPA）還是單頁應(yīng)用（SPA）都可以受益于此。

圖片

視圖過渡的常見應(yīng)用：

1. 圖片轉(zhuǎn)換：例如在商品詳情頁上，當(dāng)用戶點(diǎn)擊縮略圖時(shí)，可以實(shí)現(xiàn)從小圖到大圖的平滑轉(zhuǎn)換。
2. 導(dǎo)航穩(wěn)定性：在頁面切換時(shí)，固定導(dǎo)航欄保持不變，確保用戶體驗(yàn)的連貫性。
3. 內(nèi)容動(dòng)態(tài)調(diào)整：隨著內(nèi)容的篩選，網(wǎng)格布局的項(xiàng)目可以平滑移動(dòng)。

視圖過渡不局限于某一特定框架，它的實(shí)現(xiàn)依賴以下基礎(chǔ)：

• 狀態(tài)快照：首先，瀏覽器為頁面的當(dāng)前狀態(tài)和目標(biāo)狀態(tài)拍照。
• DOM更新：在抑制重繪的同時(shí)，瀏覽器對(duì) DOM 進(jìn)行必要的更新。
• CSS動(dòng)畫支持：最終通過 CSS 動(dòng)畫實(shí)現(xiàn)視覺上的平滑過渡。

視圖過渡分為兩種類型：同一文檔視圖轉(zhuǎn)換和跨文檔視圖轉(zhuǎn)換。

同一文檔視圖轉(zhuǎn)換：這種形式常用于SPA項(xiàng)目，適用于在同一頁面內(nèi)進(jìn)行視圖更新。例如，可以通過調(diào)用document.startViewTransition來觸發(fā)這樣的轉(zhuǎn)換：

function handleClick(e) {
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }
  document.startViewTransition(() => updateTheDOMSomehow());
}

跨文檔視圖轉(zhuǎn)換：這種轉(zhuǎn)換用于在MPA項(xiàng)目中實(shí)現(xiàn)頁面間的過渡效果。它不需要開發(fā)者顯式調(diào)用API，當(dāng)進(jìn)行同源跨文檔導(dǎo)航時(shí)，轉(zhuǎn)換自動(dòng)發(fā)生。開啟此功能的網(wǎng)頁可以通過以下CSS代碼段進(jìn)行配置：

@view-transition {
  navigation: auto;
}

視圖過渡的應(yīng)用，使得在確保視覺吸引力的同時(shí)提升了動(dòng)態(tài)和互動(dòng)體驗(yàn)，為現(xiàn)代網(wǎng)頁設(shè)計(jì)帶來了新的可能性。

為啥選擇 <ViewTransition />？

在前端開發(fā)中，實(shí)現(xiàn)動(dòng)畫效果的需求一直都很高，而傳統(tǒng)的實(shí)現(xiàn)方法常常面臨許多挑戰(zhàn)。以往的動(dòng)畫實(shí)現(xiàn)通常需要依賴第三方庫，如 Motion for React 或 React Spring，這些庫在一定程度上幫助開發(fā)者簡化了動(dòng)畫的實(shí)現(xiàn)，但在性能和靈活性方面仍然有所欠缺。

傳統(tǒng)的動(dòng)畫實(shí)現(xiàn)方法通常需要手動(dòng)管理動(dòng)畫狀態(tài)和 DOM 更新，這對(duì)開發(fā)者而言是一項(xiàng)繁重且容易出錯(cuò)的任務(wù)。第三方庫雖然提供了一些便捷的工具和接口，但它們往往引入了額外的代碼依賴，使得項(xiàng)目的體積增大，并可能帶來性能問題。

• 動(dòng)畫協(xié)調(diào)復(fù)雜：要在不同狀態(tài)之間協(xié)調(diào)動(dòng)畫效果，開發(fā)者需要編寫大量代碼手動(dòng)處理。
• 性能負(fù)擔(dān)：較大的庫會(huì)影響頁面加載速度，增加首次渲染的時(shí)間。
• 交互不靈活：很多庫在處理復(fù)雜交互和動(dòng)畫中斷時(shí)力不從心，動(dòng)畫一旦啟動(dòng)很難被打斷或調(diào)整。

<ViewTransition /> 是一種全新的解決方案，它直接基于瀏覽器的 View Transition API，為開發(fā)者提供了一種簡化的方式來實(shí)現(xiàn)動(dòng)畫效果。這一 API 在 React 中得到了很好的集成，具有以下優(yōu)勢：

• 深度集成：<ViewTransition /> 嵌入React的渲染周期中，可以在 DOM 改變前盡可能晚地觸發(fā)視圖過渡，最大限度地保持頁面活躍狀態(tài)。
• 響應(yīng)式更新：僅在異步更新（例如 startTransition 和 <Suspense /> ）時(shí)工作，使得狀態(tài)更新可以隨時(shí)中斷或取消，從而提高了 UI 的響應(yīng)速度。
• 自動(dòng)化處理：無需手動(dòng)為每個(gè)動(dòng)畫元素指定轉(zhuǎn)換名稱，React 會(huì)自動(dòng)管理，減少了開發(fā)者的工作量。
• 性能優(yōu)化：相比手動(dòng)操控視圖過渡的方式，<ViewTransition /> 提供了性能更優(yōu)的解決方案，避免了多余的計(jì)算和渲染。

通過引入 <ViewTransition />，React 讓開發(fā)者可以更容易地實(shí)現(xiàn)復(fù)雜、流暢、且響應(yīng)迅速的動(dòng)畫效果，為構(gòu)建現(xiàn)代化、互動(dòng)式的用戶界面提供了強(qiáng)大的支持。

<ViewTransition /> 使用

<ViewTransition /> 是為了處理異步更新而設(shè)計(jì)的，比如 startTransition、useDeferredValue 和 <Suspense> 等場景。通過這些機(jī)制，視圖過渡可以在頁面狀態(tài)異步更新時(shí)被觸發(fā)，帶來自然流暢的動(dòng)畫效果。然而，如果是同步更新，那么默認(rèn)不會(huì)觸發(fā)視圖過渡，這意味著UI更新是立即提交的，無法通過 <ViewTransition /> 控制其動(dòng)畫。

<ViewTransition /> 組件可以像 DOM 片段一樣，將其子組件的過渡效果在獨(dú)立的快照中實(shí)現(xiàn)。其用法非常簡單，只需將需要過渡的組件用 <ViewTransition> 包裹即可：

import { ViewTransition } from 'react';

<ViewTransition><Component /></ViewTransition>

默認(rèn)情況下，name='auto'，這會(huì)自動(dòng)為包裹的子節(jié)點(diǎn)分配一個(gè) view-transition-name，無需手動(dòng)控制DOM節(jié)點(diǎn)的樣式。

此外，<ViewTransition /> 提供了簡潔直觀的應(yīng)用方式，比如條件渲染（condition ? <ComponentA /> : <ComponentB />）可以實(shí)現(xiàn)組件切換之間的交叉淡入淡出效果。類似的，在 <Suspense> 中使用時(shí)，也可以實(shí)現(xiàn)從后備加載骨架屏轉(zhuǎn)變?yōu)檎絻?nèi)容的流暢過渡：

<ViewTransition>
  <Suspense fallback={<Skeleton />}>
    <Content />
  </Suspense>
</ViewTransition>

而相較之下，如果在 <Suspense> 中單獨(dú)包裹 <ViewTransition>，則會(huì)分別觸發(fā)出入場效果：

<Suspense fallback={<ViewTransition><Skeleton /></ViewTransition>}>
  <ViewTransition><Content /></ViewTransition>
</Suspense>

<ViewTransition /> 高級(jí)功能

<ViewTransition /> 為開發(fā)者提供了多個(gè)高級(jí)功能，讓動(dòng)畫的實(shí)現(xiàn)更為靈活和強(qiáng)大。

組件切換及動(dòng)畫：

在使用 <ViewTransition /> 時(shí)，不僅可以實(shí)現(xiàn)組件狀態(tài)下的動(dòng)畫，還可以在兩個(gè)不同組件之間切換時(shí)，完成自然的淡入淡出。例如：

<ViewTransition>
  {state ? <MenuA /> : <MenuB />}
</ViewTransition>

上述代碼可以在 MenuA 和 MenuB 之間切換時(shí)自動(dòng)交叉淡出過渡，從而提升用戶體驗(yàn)。

共享元素動(dòng)畫的實(shí)現(xiàn)：當(dāng)需要在不同視圖之間共享元素動(dòng)畫時(shí)，<ViewTransition /> 也可以通過命名來支持。例如：

{isSelected && (
  <ViewTransition name='underline'>
    <Underline />
  </ViewTransition>
)}

當(dāng)一個(gè)元素從一個(gè)位置移除并在另一個(gè)位置創(chuàng)建時(shí)，只需確保名稱匹配，即可實(shí)現(xiàn)共享動(dòng)畫。這種功能可以防止元素在屏幕上隨意移動(dòng)，為用戶提供更一致的表現(xiàn)。

自定義動(dòng)畫：對(duì)于更復(fù)雜的動(dòng)畫需求，<ViewTransition /> 提供了事件處理器來進(jìn)行自定義。例如：

• onEnter / onLeave: 在組件進(jìn)入或離開DOM時(shí)觸發(fā)。
• onLayout: 由于外部組件的影響，該組件的邊界發(fā)生變化。
• onUpdate: 組件的內(nèi)容或邊界由于自身或子組件的影響發(fā)生變化。
• onShare: 實(shí)施共享元素過渡時(shí)觸發(fā)。

這些事件處理器為開發(fā)者提供了更多的自定義空間，通過這些事件，開發(fā)者可以充分利用Web動(dòng)畫API來創(chuàng)建復(fù)雜的動(dòng)畫效果，譬如利用 clipPath 動(dòng)畫創(chuàng)建遮罩效果。

通過這些功能，<ViewTransition /> 不僅提高了動(dòng)畫的可控性，也使得復(fù)雜的 UI 交互得以更流暢地實(shí)現(xiàn)。這一組件給開發(fā)者帶來了更多可能性，使動(dòng)畫不僅限于簡單的過渡，而可以成為界面交互中自然的一部分。

這個(gè)網(wǎng)站中還有一些關(guān)于 ViewTransition 的使用示例，大家可以仔細(xì)探索：https://react-view-transition-examples.motion.dev/

一些實(shí)踐經(jīng)驗(yàn)

使用 <ViewTransition /> 實(shí)現(xiàn)動(dòng)畫，有一些最佳實(shí)踐可以幫助開發(fā)者更好地管理過渡效果，提高應(yīng)用的性能和用戶體驗(yàn)。

合理管理視圖過渡：

1. 明確過渡邊界：在使用動(dòng)畫時(shí)，應(yīng)該合理界定過渡的范圍。僅對(duì)需要關(guān)注的元素添加動(dòng)畫，而非全局應(yīng)用，這樣可以提高動(dòng)畫的性能并讓用戶注意力集中在關(guān)鍵信息上。
2. 僅在必要時(shí)啟動(dòng)動(dòng)畫：確保只在必須時(shí)才觸發(fā)視圖過渡。這可以通過條件渲染或異步觸發(fā)機(jī)制來實(shí)現(xiàn)，避免不必要的動(dòng)畫對(duì)頁面交互產(chǎn)生干擾。
3. 使用顯式命名來管理共享動(dòng)畫：在實(shí)現(xiàn)共享元素動(dòng)畫的時(shí)候，盡量使用顯式命名來標(biāo)識(shí)不同動(dòng)畫片段。這有助于避免命名沖突，提高動(dòng)畫管理的可讀性和可維護(hù)性。

注意事項(xiàng)：

1. 理解異步特點(diǎn)：<ViewTransition /> 依賴于異步更新來觸發(fā)動(dòng)畫，而非同步操作。因此在開發(fā)中應(yīng)理解和把握異步更新機(jī)制，如 startTransition 和 <Suspense /> 等，確保動(dòng)畫流暢執(zhí)行。
2. 避免大范圍DOM更新：在視圖過渡期間，盡量避免對(duì)DOM進(jìn)行大范圍修改。大量的DOM更改可能會(huì)導(dǎo)致動(dòng)畫卡頓，使過渡效果不流暢。
3. 仔細(xì)調(diào)試動(dòng)畫：在應(yīng)用 <ViewTransition /> 制作精細(xì)動(dòng)畫時(shí)，一定要進(jìn)行充分的調(diào)試，以確保所有的動(dòng)畫切換和視覺效果都精準(zhǔn)無誤?？梢岳脼g覽器的開發(fā)者工具來逐幀檢查動(dòng)畫細(xì)節(jié)。
4. 優(yōu)化動(dòng)畫性能：為優(yōu)化動(dòng)畫性能，盡量在動(dòng)畫過程中使用硬件加速的CSS屬性（如 transform 和 opacity），這些屬性能夠高效地降低動(dòng)畫開銷。

<ViewTransition /> 和 Motion 的比較

<ViewTransition /> 的特點(diǎn)在于其依賴異步更新機(jī)制，通過 startTransition 和 <Suspense /> 實(shí)現(xiàn)流暢的視圖切換。它提供了一種簡單方法來處理元素在視圖狀態(tài)變化間的過渡，使得切換過程自然且不打斷用戶交互。主要用于全局的視圖切換，支持更復(fù)雜的共享元素動(dòng)畫。

而 Motion 是 React 社區(qū)中廣泛使用的動(dòng)畫庫，擅長于處理微交互。它允許更精細(xì)的動(dòng)畫控制，如縮放、旋轉(zhuǎn)、平移等，并能處理相對(duì)和嵌套動(dòng)畫。這些動(dòng)畫可被中斷，對(duì)于小型動(dòng)畫和組件加載時(shí)的動(dòng)畫會(huì)更為合適。

Motion 能夠更加定制化動(dòng)畫效果，通過計(jì)算轉(zhuǎn)換和比例失真校正實(shí)現(xiàn)視覺上的平滑過渡。盡管如此，它在處理大型視圖改變時(shí)可能不如 <ViewTransition /> 高效。

如何讓動(dòng)畫在復(fù)雜應(yīng)用中更加流暢與易控：

1. 結(jié)合使用：在復(fù)雜應(yīng)用中，不妨考慮同時(shí)使用 <ViewTransition /> 和 Motion。前者用以全局視圖的切換，后者用于細(xì)化特定組件上的微交互動(dòng)畫。
2. 腳本化API：使用Motion時(shí)，可以利用其腳本化API構(gòu)建更復(fù)雜的交互過程。對(duì)于 <ViewTransition />，則可以利用其自動(dòng)化和簡單設(shè)置更快速地實(shí)現(xiàn)過渡效果。
3. 優(yōu)化性能：在應(yīng)用中實(shí)施動(dòng)畫時(shí)，始終記得性能優(yōu)化。避免在主線程處理密集型任務(wù)，合理使用CSS硬件加速屬性，確保用戶界面響應(yīng)迅速。

目前這個(gè)組件尚未發(fā)布到正式環(huán)境，還在實(shí)驗(yàn)階段，未來可能還會(huì)發(fā)生變化，大家在生產(chǎn)環(huán)境謹(jǐn)慎使用。