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

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

react-spring速覽

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

springs

讓我們考慮動(dòng)畫的經(jīng)典“Hello world”：內(nèi)容的淡入淡出。讓我們停下來(lái)思考一下，如何在沒有任何動(dòng)畫的情況下切換顯示和隱藏。它看起來(lá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>
  );
}

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

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

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

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

您可能認(rèn)為您可以這樣做：

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

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

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

就是這樣。

高度動(dòng)畫

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

我們需要?jiǎng)討B(tài)獲取任意內(nèi)容的高度，以便將其值傳遞給react-spring。事實(shí)證明，Web平臺(tái)專門為此設(shè)計(jì)了一些東西：ResizeObserver。并且它的支持實(shí)際上相當(dāng)不錯(cuò)！由于我們使用的是React，我們當(dāng)然會(huì)將該用法包裝在一個(gè)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>

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

讓我們看看它的實(shí)際效果。

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為我們提供了要測(cè)量的ref和內(nèi)容的高度值，我們將其傳遞給我們的spring。然后我們應(yīng)用ref并應(yīng)用高度樣式。

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

動(dòng)畫過(guò)渡

最后，讓我們看看如何將動(dòng)畫項(xiàng)目添加到DOM中以及從DOM中移除動(dòng)畫項(xiàng)目。我們已經(jīng)知道如何動(dòng)畫化現(xiàn)有項(xiàng)目并保留在DOM中的項(xiàng)目的值變化，但是要?jiǎng)赢嫽砑踊騽h除項(xiàng)目，我們需要一個(gè)新的hook：useTransition。

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

為了動(dòng)畫化項(xiàng)目列表，像這樣：

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是一個(gè)函數(shù)。react-spring正在跟蹤列表數(shù)組，跟蹤已添加和刪除的項(xiàng)目。我們調(diào)用listTransitions函數(shù)，提供一個(gè)接受單個(gè)樣式對(duì)象和單個(gè)項(xiàng)目的回調(diào)函數(shù)，react-spring將根據(jù)項(xiàng)目是新添加的、新刪除的還是只是位于列表中，為列表中的每個(gè)項(xiàng)目調(diào)用它，并使用正確的樣式。

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

演示

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

[演示鏈接]

其他細(xì)節(jié)

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

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

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

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

關(guān)于這些沙箱的一些注意事項(xiàng)

Code Sandbox使用熱重載。當(dāng)您更改代碼時(shí)，更改通常會(huì)立即反映出來(lái)。這很酷，但可能會(huì)對(duì)動(dòng)畫造成破壞。如果您開始修補(bǔ)，然后看到奇怪的、表面上不正確的行為，請(qǐng)嘗試刷新沙箱。

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

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

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

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

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

我們將從一個(gè)功能齊全的UI開始，然后逐步為各個(gè)部分添加動(dòng)畫，包括交互式演示。

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

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

讓我們從我們的模態(tài)開始。在我們開始添加任何數(shù)據(jù)之前，讓我們讓我們的模態(tài)動(dòng)畫化得很好。這是一個(gè)基本的、未動(dòng)畫化的模態(tài)的樣子。我使用的是Ryan Florence的Reach UI（特別是模態(tài)組件），但無(wú)論您使用什么來(lái)構(gòu)建模態(tài)，這個(gè)想法都是一樣的。我們希望讓我們的背景淡入，并轉(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)。我們只需要通過(guò)轉(zhuǎn)換hook來(lái)使其動(dòng)畫化。

以下是轉(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)是否處于活動(dòng)狀態(tài)提供輕微的垂直轉(zhuǎn)換。奇怪的部分是這個(gè)：

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

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

當(dāng)然，我們將通過(guò)hook返回的轉(zhuǎn)換函數(shù)呈現(xiàn)我們的內(nèi)容。請(qǐng)注意，我正在從樣式對(duì)象中提取不透明度樣式以應(yīng)用于背景，然后將所有動(dòng)畫樣式應(yīng)用于實(shí)際的模態(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>
    )
);

[演示鏈接]

剩余部分省略，因?yàn)槠^(guò)長(zhǎng)，且與前面內(nèi)容重復(fù)。 核心思想是利用react-spring的useSpring和useTransition hook，結(jié)合ResizeObserver來(lái)實(shí)現(xiàn)各種動(dòng)畫效果，包括淡入淡出、高度變化、以及列表項(xiàng)目的進(jìn)出動(dòng)畫。 文中詳細(xì)解釋了如何處理動(dòng)畫的細(xì)節(jié)，例如初始狀態(tài)、動(dòng)畫時(shí)長(zhǎng)、以及如何避免動(dòng)畫沖突。 最終效果是一個(gè)流暢且用戶體驗(yàn)良好的交互式UI。

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