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

本文將使用最新的9.x版本（撰寫(xiě)本文時(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)畫(huà)和過(guò)渡動(dòng)畫(huà)。本節(jié)末尾將提供一個(gè)可運(yùn)行的演示，因此不必?fù)?dān)心過(guò)程中可能會(huì)遇到的困惑。

springs

讓我們考慮動(dòng)畫(huà)的經(jīng)典“Hello world”：內(nèi)容的淡入淡出。讓我們停下來(lái)思考一下，如何在沒(méi)有任何動(dòng)畫(huà)的情況下切換顯示和隱藏。它看起來(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)畫(huà)化不透明度的變化？如果我們可以根據(jù)狀態(tài)聲明性地設(shè)置所需的不透明度，就像上面那樣，但讓這些值平滑地動(dòng)畫(huà)化，豈不是很好？這就是react-spring的作用?？梢詫eact-spring視為我們的中間人，它處理我們不斷變化的樣式值，從而產(chǎn)生我們想要的動(dòng)畫(huà)值之間的平滑過(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 。這聽(tīng)起來(lái)可能令人困惑，但實(shí)際上只是意味著：

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

就是這樣。

高度動(dòng)畫(huà)

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

我們需要?jiǎng)討B(tài)獲取任意內(nèi)容的高度，以便將其值傳遞給react-spring。事實(shí)證明，Web平臺(tái)專門(mén)為此設(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)畫(huà)過(guò)渡

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

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

為了動(dòng)畫(huà)化項(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)目平滑地開(kāi)始進(jìn)入，然後立即從動(dòng)畫(huà)的任何階段開(kāi)始離開(kāi)。相反，如果您添加一個(gè)項(xiàng)目，然後快速點(diǎn)擊“刪除”按鈕和“添加”按鈕，則相同的項(xiàng)目將開(kāi)始滑動(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)用這些增量。相反，它使用更複雜的算法來(lái)產(chǎn)生這種類似彈簧的效果，這將顯得更自然。

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

另請(qǐng)注意，我如何在translate3d值內(nèi)動(dòng)畫(huà)化值。如您所見(jiàn)，語(yǔ)法不是最簡(jiǎn)潔的，因此react-spring提供了一些快捷方式。對(duì)此有文檔說(shuō)明，但在本文的其餘部分，為了保持清晰起見(jiàn)，我將繼續(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)畫(huà)造成破壞。如果您開(kāi)始修補(bǔ)，然後看到奇怪的、表面上不正確的行為，請(qǐng)嘗試刷新沙箱。

本文中的其他沙箱將使用模態(tài)。由於我無(wú)法完全弄清楚的原因，當(dāng)模態(tài)打開(kā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ě)的博客文章在某種程度上與我的書(shū)單項(xiàng)目相關(guān)。這篇也不例外——這不是癡迷，只是該項(xiàng)目碰巧有一個(gè)公開(kāi)可用的GraphQL端點(diǎn)和大量可以利用的現(xiàn)有代碼，使其成為一個(gè)顯而易見(jiàn)的目標(biāo)。

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

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

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

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

讓我們從我們的模態(tài)開(kāi)始。在我們開(kāi)始添加任何數(shù)據(jù)之前，讓我們讓我們的模態(tài)動(dòng)畫(huà)化得很好。這是一個(gè)基本的、未動(dòng)畫(huà)化的模態(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)畫(huà)化。

以下是轉(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)` }
});

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

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

我只想在模態(tài)打開(kā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)打開(kā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)畫(huà)樣式應(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)容重複。 核心思想是利用react-spring的useSpring和useTransition hook，結(jié)合ResizeObserver來(lái)實(shí)現(xiàn)各種動(dòng)畫(huà)效果，包括淡入淡出、高度變化、以及列表項(xiàng)目的進(jìn)出動(dòng)畫(huà)。 文中詳細(xì)解釋瞭如何處理動(dòng)畫(huà)的細(xì)節(jié)，例如初始狀態(tài)、動(dòng)畫(huà)時(shí)長(zhǎng)、以及如何避免動(dòng)畫(huà)衝突。 最終效果是一個(gè)流暢且用戶體驗(yàn)良好的交互式UI。

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