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

本教程探討了React-Spring的五個鉤子中的兩個： useSpring和useTrail 。我們將通過實際示例來說明它們的用法。

首先，安裝React-Spring：

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

＃npm
NPM安裝React-Spring-保存

用useSpring彈簧動畫

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

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

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

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

  返回 （
    <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)showContent是真實的時，盒子滑下並變得可見。否則，它仍然隱藏在屏幕外。

用useTrail動畫列表

useTrail掛鉤依次對項目列表進行動畫動畫。每個項目都在前面的一個動畫。讓我們獲取用戶列表並為其渲染動畫。

導(dǎo)入React，{usestate，usefeft}來自'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，{
    來自：{marginleft：-20，不透明度：0，轉(zhuǎn)換：'transfate3d（0，-40px，0）'}，
    to：{marginleft：20，不透明度：1，變換：'translate3d（0,0px，0）'}，
    配置：{MASS：5，張力：2000，摩擦：200} //可選：微調(diào)動畫
  }）;

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

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

結(jié)論

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

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