React Springを使用してアニメーションを作成します

アニメーションをReactアプリケーションに統合することは、伝統的に困難でした。ただし、Paul Henschelが作成した強力なライブラリであるReact-Springは、プロセスを大幅に簡素化します。アニメーション化された反応と反応のモーションに基づいて、最適化されたパフォーマンスと合理化されたAPIを提供します。

このチュートリアルでは、React-Springの5つのフックのうち2つ、 useSpringとuseTrail探ります。実用的な例を通じてそれらの使用を説明します。

開始するには、React-springをインストールします。

 ＃糸
ヤーンは反応スプリングを追加します

＃npm
NPMインストールReact-spring  -  save

useSpringでアニメーション化します

useSpringフックは、州間のスムーズな移行を促進します。アニメーションの開始ポイントとエンドtoを指定するために、プロパティfrom定義します。最終状態to指示する一方from 、初期状態を設定します。

最初の例では、 useSpring使用して、画面にスライドするボックスをアニメーション化します。最初に隠されていたが、ボタンがクリックされたときに表示されます。

 「React」からReact、{UseState}をインポートします。
'ruce-spring'から{useSpring、aNIMATED}をインポートします。

const app =（）=> {
  const [showcontent、setshowcontent] = uesestate（false）;
  const contentProps = useSpring（{
    不透明：showcontent？ 1：0、
    Margintop：showcontent？ 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、useefcect} from 'React';
「usetrail、アニメーション}」から「react-spring」からインポート。

const app =（）=> {
  const [users、setusers] = uesestate（[]）;
  effect（（）=> {
    fetch（ 'https://jsonplaceholder.typicode.com/users'）
      .then（res => res.json（））
      .then（data => setusers（data））;
  }、[]）;

  const trail = usetrail（users.length、{
    from：{marginleft：-20、ofacity：0、transform： 'translate3d（0、-40px、0）'}、
    to：{marginleft：20、ofacity：1、transform： 'translate3d（0,0px、0）'}、
    config：{mass：5、tension：2000、摩擦：200} //オプション：微調整アニメーション
  }）;

  戻る （
    <div>
      <h1 id="ランダムユーザー">ランダムユーザー</h1>
      {trail.map（（{style}、index）=>（
        <animated.div key="{users[index]?.id}" classname="box" style="{style}">
          {users [index]？。username}
        </animated.div>
      ））}
    </div>
  ）;
};

useTrail 、ユーザーリストによろめきアニメーションを作成します。各ユーザー名はわずかな遅延でスライドします。スムーズなアニメーションのエラー処理とオプションの構成が含まれています。

結論

React Springは、Reactアプリケーションのアニメーションに対するユーザーフレンドリーなアプローチを提供します。創造的なアニメーションの可能性を解き放つために、その広範なドキュメントと例を調べてください。アニメーションを実装するときは、アクセシビリティを考慮してください。

以上がReact Springを使用してアニメーションを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。