傳統(tǒng)上，將動(dòng)畫(huà)整合到您的反應(yīng)應(yīng)用程序中是具有挑戰(zhàn)性的。但是，由Paul Henschel創(chuàng)建的強(qiáng)大庫(kù)React-Spring大大簡(jiǎn)化了該過(guò)程。在動(dòng)畫(huà)和反應(yīng)運(yùn)動(dòng)的基礎(chǔ)上，它提供了優(yōu)化的性能和簡(jiǎn)化的API。

本教程探討了React-Spring的五個(gè)鉤子中的兩個(gè)： useSpring和useTrail 。我們將通過(guò)實(shí)際示例來(lái)說(shuō)明它們的用法。

首先，安裝React-Spring：

 ＃紗
紗線添加反應(yīng)彈簧

＃npm
NPM安裝React-Spring-保存

用useSpring彈簧動(dòng)畫(huà)

useSpring掛鉤促進(jìn)了狀態(tài)之間的平穩(wěn)過(guò)渡。我們from和to屬性來(lái)指定動(dòng)畫(huà)的起點(diǎn)和終點(diǎn)。 from設(shè)定初始狀態(tài)，而to最終狀態(tài)。

我們的第一個(gè)示例使用useSpring將盒子滑到屏幕上的動(dòng)畫(huà)。最初隱藏了，單擊按鈕時(shí)會(huì)出現(xiàn)。

導(dǎo)入React，{usestate}來(lái)自“ React”；
從“ react-spring”中導(dǎo)入{usepring，anistation};

const app =（）=> {
  const [showcontent，setShowContent] = usestate（false）;
  const contentprops = usepring（{
    不透明度：展示？ 1：0，
    Margintop：展示？ 0：-1000，
    配置：{持續(xù)時(shí)間：500} //可選：添加動(dòng)畫(huà)持續(xù)時(shí)間
  }）;

  返回 （
    <div classname="container">
      <button classname="button" onclick="{()"> setShowContent（！showcontent）}>
        切換內(nèi)容
      </button>
      <animated.div classname="box" style="{contentProps}">
        <h1>此內(nèi)容歸功于React Spring！</h1>
      </animated.div>
    </div>
  ）；
};

useSpring掛鉤管理動(dòng)畫(huà)。當(dāng)showContent是真實(shí)的時(shí)，盒子滑下并變得可見(jiàn)。否則，它仍然隱藏在屏幕外。

用useTrail動(dòng)畫(huà)列表

useTrail掛鉤依次對(duì)項(xiàng)目列表進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)。每個(gè)項(xiàng)目都在前面的一個(gè)動(dòng)畫(huà)。讓我們獲取用戶列表并為其渲染動(dòng)畫(huà)。

導(dǎo)入React，{usestate，usefeft}來(lái)自'react';
從“ react-spring”導(dǎo)入{usetrail，andionated}；

const app =（）=> {
  const [用戶，setuser] = usestate（[]）;
  useeffect（（）=> {
    fetch（'https://jsonplaceholder.typicode.com/users'）
      然后（res => res.json（））
      。
  }，[]）;

  const trail = usetrail（users.length，{
    來(lái)自：{marginleft：-20，不透明度：0，轉(zhuǎn)換：'transfate3d（0，-40px，0）'}，
    to：{marginleft：20，不透明度：1，變換：'translate3d（0,0px，0）'}，
    配置：{MASS：5，張力：2000，摩擦：200} //可選：微調(diào)動(dòng)畫(huà)
  }）;

  返回 （
    <div>
      <h1>隨機(jī)用戶</h1>
      {trail.map（（{{style}，index）=>（（
        <animated.div key="{users[index]?.id}" classname="box" style="{style}">
          {用戶[索引]？。用戶名}
        </animated.div>
      ）}}
    </div>
  ）；
};

useTrail為用戶列表創(chuàng)建了一個(gè)交錯(cuò)的動(dòng)畫(huà)。每個(gè)用戶名稍微延遲滑入。包括錯(cuò)誤處理和可選的配置，以進(jìn)行更順暢的動(dòng)畫(huà)。

結(jié)論

React Spring在React應(yīng)用程序中提供了一種用戶友好的動(dòng)畫(huà)方法。探索其廣泛的文檔和示例以解鎖創(chuàng)意動(dòng)畫(huà)的可能性。請(qǐng)記住在實(shí)現(xiàn)動(dòng)畫(huà)時(shí)考慮可訪問(wèn)性。

以上是使用React Spring創(chuàng)建動(dòng)畫(huà)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！