使用React Spring創建動畫

傳統上，將動畫整合到您的反應應用程序中是具有挑戰性的。但是，由Paul Henschel創建的強大庫React-Spring大大簡化了該過程。在動畫和反應運動的基礎上，它提供了優化的性能和簡化的API。

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

首先，安裝React-Spring：

 ＃紗
紗線添加反應彈簧

＃npm
NPM安裝React-Spring-保存

用useSpring彈簧動畫

useSpring掛鉤促進了狀態之間的平穩過渡。我們from和to屬性來指定動畫的起點和終點。 from設定初始狀態，而to最終狀態。

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

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

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

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

useSpring掛鉤管理動畫。當showContent是真實的時，盒子滑下並變得可見。否則，它仍然隱藏在屏幕外。

用useTrail動畫列表

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

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

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

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

結論

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

以上是使用React Spring創建動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！