React tsparticles を Web サイトに実装する

React-tsparticles は、カスタマイズ可能なパーティクル アニメーションを React アプリケーションに追加できる強力なライブラリです。このガイドでは、プロジェクトに React-tsparticles を実装するプロセスを順を追って説明します。
インストール
まず、必要なパッケージをインストールする必要があります。ターミナルを開いて次のコマンドを実行します:

npm install tsparticles @tsparticles/react

これにより、コア tsparticles ライブラリと React ラッパーの両方がインストールされます。
パーティクルコンポーネントの作成
コンポーネント ディレクトリに新しいファイル (Particle.js など) を作成します。このファイルにはパーティクル システムの設定が含まれます。
Particle コンポーネントのコードは次のとおりです:

import { useCallback, useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadFull } from "tsparticles";

export default function Particle() {
  const [init, setInit] = useState(false);

  useEffect(() => {
    console.log("init");
    initParticlesEngine(async (engine) => {
      await loadFull(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  const particlesLoaded = (container) => {
    // You can add any logic here that should run when particles are loaded
  };

  return (
    <>
      {init && (
        <Particles
          id="tsparticles"
          particlesLoaded={particlesLoaded}
          style={{
            zIndex: 1,
          }}
          options={{
            fpsLimit: 120,
            interactivity: {
              events: {
                onClick: {
                  enable: true,
                  mode: "push",
                },
                onHover: {
                  enable: true,
                  mode: "repulse",
                },
                resize: true,
              },
              modes: {
                push: {
                  quantity: 4,
                },
                repulse: {
                  distance: 200,
                  duration: 0.4,
                },
              },
            },
            particles: {
              color: {
                value: "#bae6fd",
              },
              links: {
                color: "#e0f2fe",
                distance: 150,
                enable: true,
                opacity: 0.5,
                width: 1,
              },
              move: {
                direction: "none",
                enable: true,
                outModes: {
                  default: "bounce",
                },
                random: false,
                speed: 1.2,
                straight: false,
              },
              number: {
                density: {
                  enable: true,
                  area: 800,
                },
                value: 160,
              },
              opacity: {
                value: 0.5,
              },
              shape: {
                type: "circle",
              },
              size: {
                value: { min: 1, max: 5 },
              },
            },
            detectRetina: true,
          }}
        />
      )}
    </>
  );
}

このコンポーネントの重要な部分を分析してみましょう:

初期化: useEffect フックは、コンポーネントのマウント時にパーティクル エンジンを初期化します。
レンダリング: パーティクル コンポーネントは初期化 (初期状態が true) 後にのみレンダリングされます。
構成: Particles コンポーネントのオプション プロパティには、パーティクル システムのすべての構成が含まれています。これには、インタラクティブ性の設定、パーティクルの外観、動きなどが含まれます。
_
パーティクルコンポーネントの使用_
このコンポーネントを React アプリケーションで使用するには、パーティクルを表示したい場所にコンポーネントをインポートしてレンダリングするだけです。たとえば、App.js では次のようになります:

import React from 'react';
import Particle from './components/Particle';

function App() {
  return (
    <div className="App">
      <Particle />
      {/* Your other components */}
    </div>
  );
}

export default App;

カスタマイズ
Particle コンポーネントのオプション オブジェクトでは、パーティクルの動作と外観をカスタマイズできます。変更できる主な領域は次のとおりです:

• カラー: パーティクル オブジェクトの color.value を変更して、別のパーティクル カラーを設定します。
• 形状: さまざまなパーティクル形状 (「正方形」、「三角形」など) を使用するには、shape.type を変更します。
• 数値: 数値を調整してパーティクルの数を増減します。
• 移動: 移動オブジェクトの設定を変更して、パーティクルの移動方法を変更します。
• インタラクティブ性: インタラクティブ性オブジェクトを変更して、パーティクルがユーザー入力にどのように反応するかを変更します。

パフォーマンスに関する考慮事項
パーティクルは魅力的な視覚効果を生み出すことができますが、リソースを大量に消費する可能性もあります。次のヒントを考慮してください:

ローエンドデバイスでのパフォーマンスを向上させるためにパーティクルの数を制限します。
fpsLimit オプションを使用してフレーム レートを制限します。
さまざまなデバイスでテストして、スムーズなパフォーマンスを確認します。
_
結論_
React-tsparticles は、React アプリケーションに動的でインタラクティブな背景を追加する柔軟な方法を提供します。このガイドに従うことで、プロジェクト内に tsparticle が実用的に実装されるはずです。さまざまな構成を試して、アプリケーションに最適なパーティクル エフェクトを作成してください!
覚えておいてください、react-tsparticles をマスターするための鍵は実験です。ユニークで魅力的な効果を実現するために、さまざまな設定を試してみることを恐れないでください。

以上がReact tsparticles を Web サイトに実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。