React動畫實現(xiàn)一直是開發(fā)中的難點。本文將深入淺出地介紹react-spring，並探討一些實際應(yīng)用案例。雖然react-spring並非React唯一的動畫庫，但它卻是最受歡迎和功能強大的庫之一。

本文將使用最新的9.x版本（撰寫本文時為候選發(fā)布版本）。如果在您閱讀本文時尚未正式發(fā)布，請使用react-spring@next安裝。根據(jù)我的經(jīng)驗和主要維護者的說法，該代碼非常穩(wěn)定。我唯一遇到的問題是在與並發(fā)模式一起使用時出現(xiàn)的小錯誤，可在GitHub倉庫中跟蹤。

react-spring速覽

在深入探討實際應(yīng)用案例之前，讓我們先快速了解一下springs、高度動畫和過渡動畫。本節(jié)末尾將提供一個可運行的演示，因此不必擔心過程中可能會遇到的困惑。

springs

讓我們考慮動畫的經(jīng)典“Hello world”：內(nèi)容的淡入淡出。讓我們停下來思考一下，如何在沒有任何動畫的情況下切換顯示和隱藏。它看起來像這樣：

 export default function App() {
  const [showing, setShowing] = useState(false);
  return (
    <div>
      <div style="{{" opacity: showing :>
        This content will fade in and fade out
      </div>
      <button onclick="{()"> setShowing(val => !val)}>Toggle</button>
      <hr>
    </div>
  );
}

簡單，但乏味。我們?nèi)绾?em>動畫化不透明度的變化？如果我們可以根據(jù)狀態(tài)聲明性地設(shè)置所需的不透明度，就像上面那樣，但讓這些值平滑地動畫化，豈不是很好？這就是react-spring的作用?？梢詫eact-spring視為我們的中間人，它處理我們不斷變化的樣式值，從而產(chǎn)生我們想要的動畫值之間的平滑過渡。像這樣：

 const [showA, setShowA] = useState(false);

const fadeStyles = useSpring({
  config: { ...config.stiff },
  from: { opacity: 0 },
  to: {
    opacity: showA ? 1 : 0
  }
});

我們使用from指定初始樣式值，並根據(jù)當前狀態(tài)在to部分指定當前值。返回值fadeStyles包含我們應(yīng)用於內(nèi)容的實際樣式值。我們只需要做最後一件事……

您可能認為您可以這樣做：

<div style="{fadeStyles}">
  ...
</div>

但這行不通。我們不能使用普通的div ，而需要使用從animated導(dǎo)出創(chuàng)建的react-spring div 。這聽起來可能令人困惑，但實際上只是意味著：

<animated.div style="{fadeStyles}">
  ...
</animated.div>

就是這樣。

高度動畫

根據(jù)我們正在動畫化的內(nèi)容，我們可能希望內(nèi)容上下滑動，從零高度到其全尺寸，以便周圍的內(nèi)容平滑地調(diào)整和流動到位。您可能希望我們可以簡單地複制上面的代碼，高度從零變?yōu)閍uto，但可惜的是，您不能動畫化為auto高度。這在普通的CSS和react-spring中都不起作用。相反，我們需要知道內(nèi)容的實際高度，並在spring的to部分指定它。

我們需要動態(tài)獲取任意內(nèi)容的高度，以便將其值傳遞給react-spring。事實證明，Web平臺專門為此設(shè)計了一些東西： ResizeObserver 。並且它的支持實際上相當不錯！由於我們使用的是React，我們當然會將該用法包裝在一個hook中。我的hook如下所示：

 export function useHeight({ on = true /* no value means on */ } = {} as any) {
  const ref = useRef<any> ();
  const [height, set] = useState(0);
  const heightRef = useRef(height);
  const [ro] = useState(
    () =>
      new ResizeObserver(packet => {
        if (ref.current && heightRef.current !== ref.current.offsetHeight) {
          heightRef.current = ref.current.offsetHeight;
          set(ref.current.offsetHeight);
        }
      })
  );
  useLayoutEffect(() => {
    if (on && ref.current) {
      set(ref.current.offsetHeight);
      ro.observe(ref.current, {});
    }
    return () => ro.disconnect();
  }, [on, ref.current]);
  return [ref, height as any];
}</any>

我們可以選擇提供一個on值來切換測量功能的啟用和禁用（這將在稍後派上用場）。當on為true時，我們告訴ResizeObserver觀察我們的內(nèi)容。我們返回一個需要應(yīng)用於我們想要測量的任何內(nèi)容的ref，以及當前高度。

讓我們看看它的實際效果。

 const [heightRef, height] = useHeight();
const slideInStyles = useSpring({
  config: { ...config.stiff },
  from: { opacity: 0, height: 0 },
  to: {
    opacity: showB ? 1 : 0,
    height: showB ? height : 0
  }
});

<animated.div style="{{" ...slideinstyles overflow:>
  <div ref="{heightRef}">
    This content will fade in and fade out with sliding
  </div>
</animated.div>

useHeight為我們提供了要測量的ref和內(nèi)容的高度值，我們將其傳遞給我們的spring。然後我們應(yīng)用ref並應(yīng)用高度樣式。

哦，別忘了在容器中添加overflow: hidden 。這允許我們正確地包含我們調(diào)整的高度值。

動畫過渡

最後，讓我們看看如何將動畫項目添加到DOM中以及從DOM中移除動畫項目。我們已經(jīng)知道如何動畫化現(xiàn)有項目並保留在DOM中的項目的值變化，但是要動畫化添加或刪除項目，我們需要一個新的hook： useTransition 。

如果您以前使用過react-spring，這是9.x版本在其API中少數(shù)幾個有重大更改的地方之一。讓我們來看一看。

為了動畫化項目列表，像這樣：

 const [list, setList] = useState([]);

我們將聲明我們的轉(zhuǎn)換函數(shù)，如下所示：

 const listTransitions = useTransition(list, {
  config: config.gentle,
  from: { opacity: 0, transform: "translate3d(-25%, 0px, 0px)" },
  enter: { opacity: 1, transform: "translate3d(0%, 0px, 0px)" },
  leave: { opacity: 0, height: 0, transform: "translate3d(25%, 0px, 0px)" },
  keys: list.map((item, index) => index)
});

正如我前面提到的，返回值listTransitions是一個函數(shù)。 react-spring正在跟蹤列表數(shù)組，跟蹤已添加和刪除的項目。我們調(diào)用listTransitions函數(shù)，提供一個接受單個樣式對象和單個項目的回調(diào)函數(shù)，react-spring將根據(jù)項目是新添加的、新刪除的還是只是位於列表中，為列表中的每個項目調(diào)用它，並使用正確的樣式。

注意keys部分：這允許我們告訴react-spring如何識別列表中的對象。在本例中，我決定告訴react-spring數(shù)組中項目的索引唯一地定義該項目。通常情況下，這是一個糟糕的主意，但現(xiàn)在，它讓我們可以看到該功能的實際效果。在下面的演示中，“添加項目”按鈕在單擊時將項目添加到列表的末尾，“刪除最後一個項目”按鈕從列表中刪除最近添加的項目。因此，如果您在輸入框中鍵入內(nèi)容，然後快速點擊“添加”按鈕，然後點擊“刪除”按鈕，您將看到相同的項目平滑地開始進入，然後立即從動畫的任何階段開始離開。相反，如果您添加一個項目，然後快速點擊“刪除”按鈕和“添加”按鈕，則相同的項目將開始滑動，然後突然停止到位，並滑動回它所在的位置。

演示

哇，說了這麼多話！這是一個可運行的演示，展示了我們剛剛介紹的所有內(nèi)容。

[演示鏈接]

其他細節(jié)

您是否注意到，當您在演示中向下滑動內(nèi)容時，它會像……彈簧一樣彈到位？這就是名稱的由來：react-spring使用彈簧物理學來插值我們不斷變化的值。它不會簡單地將值變化分成N個相等增量，然後在N個相等延遲內(nèi)應(yīng)用這些增量。相反，它使用更複雜的算法來產(chǎn)生這種類似彈簧的效果，這將顯得更自然。

彈簧算法是完全可配置的，它帶有一些您可以直接使用的預(yù)設(shè)——上面的演示使用了stiff和gentle預(yù)設(shè)。請參閱文檔了解更多信息。

另請注意，我如何在translate3d值內(nèi)動畫化值。如您所見，語法不是最簡潔的，因此react-spring提供了一些快捷方式。對此有文檔說明，但在本文的其餘部分，為了保持清晰起見，我將繼續(xù)使用完整的非快捷方式語法。

最後，我要提請注意，當您在上面的演示中向上滑動內(nèi)容時，您可能會看到其下面的內(nèi)容在最後有點跳動。這是由於相同的彈跳效果造成的。當內(nèi)容彈跳到位時，它看起來很清晰，但當我們向上滑動內(nèi)容時，則不然。請繼續(xù)關(guān)注我們將如何將其關(guān)閉。 （劇透，它是clamp屬性）。

關(guān)於這些沙箱的一些注意事項

Code Sandbox使用熱重載。當您更改代碼時，更改通常會立即反映出來。這很酷，但可能會對動畫造成破壞。如果您開始修補，然後看到奇怪的、表面上不正確的行為，請嘗試刷新沙箱。

本文中的其他沙箱將使用模態(tài)。由於我無法完全弄清楚的原因，當模態(tài)打開時，您將無法修改任何代碼——模態(tài)拒絕放棄焦點。因此，請務(wù)必在嘗試任何更改之前關(guān)閉模態(tài)。

構(gòu)建實際應(yīng)用

這些是react-spring的基本構(gòu)建塊。讓我們用它們來構(gòu)建一些更有趣的東西。鑑於以上所有內(nèi)容，您可能會認為react-spring非常易於使用。不幸的是，在實踐中，弄清楚一些需要正確處理的細微之處可能很棘手。本文的其餘部分將深入探討許多這些細節(jié)。

我以前撰寫的博客文章在某種程度上與我的書單項目相關(guān)。這篇也不例外——這不是癡迷，只是該項目碰巧有一個公開可用的GraphQL端點和大量可以利用的現(xiàn)有代碼，使其成為一個顯而易見的目標。

讓我們構(gòu)建一個UI，允許您打開模態(tài)並蒐索書籍。當結(jié)果出現(xiàn)時，您可以將它們添加到顯示在模態(tài)下方的已選書籍的運行列表中。完成後，您可以關(guān)閉模態(tài)並單擊一個按鈕以查找與所選書籍類似的書籍。

我們將從一個功能齊全的UI開始，然後逐步為各個部分添加動畫，包括交互式演示。

如果您真的渴望了解最終結(jié)果是什麼樣的，或者您已經(jīng)熟悉react-spring並想看看我是否涵蓋了您還不了解的內(nèi)容，這裡就是它（它不會贏得任何設(shè)計獎，我很清楚）。本文的其餘部分將逐步介紹實現(xiàn)最終狀態(tài)的過程。

動畫化我們的模態(tài)

讓我們從我們的模態(tài)開始。在我們開始添加任何數(shù)據(jù)之前，讓我們讓我們的模態(tài)動畫化得很好。這是一個基本的、未動畫化的模態(tài)的樣子。我使用的是Ryan Florence的Reach UI（特別是模態(tài)組件），但無論您使用什麼來構(gòu)建模態(tài)，這個想法都是一樣的。我們希望讓我們的背景淡入，並轉(zhuǎn)換我們的模態(tài)內(nèi)容。

由於模態(tài)是根據(jù)某種“open”屬性有條件地呈現(xiàn)的，因此我們將使用useTransition hook。我已經(jīng)用我自己的模態(tài)組件包裝了Reach UI模態(tài)，並根據(jù)isOpen屬性呈現(xiàn)空內(nèi)容或?qū)嶋H模態(tài)。我們只需要通過轉(zhuǎn)換hook來使其動畫化。

以下是轉(zhuǎn)換hook的樣子：

 const modalTransition = useTransition(!!isOpen, {
  config: isOpen ? { ...config.stiff } : { duration: 150 },
  from: { opacity: 0, transform: `translate3d(0px, -10px, 0px)` },
  enter: { opacity: 1, transform: `translate3d(0px, 0px, 0px)` },
  leave: { opacity: 0, transform: `translate3d(0px, 10px, 0px)` }
});

這裡沒有什麼太大的驚喜。我們希望淡入內(nèi)容並根據(jù)模態(tài)是否處於活動狀態(tài)提供輕微的垂直轉(zhuǎn)換。奇怪的部分是這個：

 config: isOpen ? { ...config.stiff } : { duration: 150 },

我只想在模態(tài)打開時使用彈簧物理學。這樣做的原因——至少根據(jù)我的經(jīng)驗——是當您關(guān)閉模態(tài)時，背景消失的時間太長，這會導(dǎo)致底層UI的交互性時間過長。因此，當模態(tài)打開時，它將通過彈簧物理學很好地彈到位，而當關(guān)閉時，它將在150毫秒內(nèi)快速消失。

當然，我們將通過hook返回的轉(zhuǎn)換函數(shù)呈現(xiàn)我們的內(nèi)容。請注意，我正在從樣式對像中提取不透明度樣式以應(yīng)用於背景，然後將所有動畫樣式應(yīng)用於實際的模態(tài)內(nèi)容。

 return modalTransition(
  (styles, isOpen) =>
    isOpen && (
      <animateddialogoverlay allowpinchzoom="{true}" initialfocusref="{focusRef}" isopen="{isOpen}" ondismiss="{onHide}" style="{{" opacity: styles.opacity>
        <animateddialogcontent style="{{" border: solid hsla borderradius: maxwidth:>
          <div>
            <div>
              <standardmodalheader caption="{headerCaption}" onhide="{onHide}"></standardmodalheader>
              {children}
            </div>
          </div>
        </animateddialogcontent>
      </animateddialogoverlay>
    )
);

[演示鏈接]

剩餘部分省略，因為篇幅過長，且與前面內(nèi)容重複。 核心思想是利用react-spring的useSpring和useTransition hook，結(jié)合ResizeObserver來實現(xiàn)各種動畫效果，包括淡入淡出、高度變化、以及列表項目的進出動畫。 文中詳細解釋瞭如何處理動畫的細節(jié)，例如初始狀態(tài)、動畫時長、以及如何避免動畫衝突。 最終效果是一個流暢且用戶體驗良好的交互式UI。

以上是使反應(yīng)彈簧有意義的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！