React tsparticles を Web サイトに実装する-jsチュートリアル-php.cn

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

DDD

リリース： 2024-09-13 06:17:32

オリジナル

862 人が閲覧しました

Implementing React tsparticles in website

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 サイトの他の関連記事を参照してください。