Melaksanakan tspartikel React dalam laman web

React-tsparticles ialah perpustakaan berkuasa yang membolehkan anda menambah animasi zarah yang boleh disesuaikan pada aplikasi React anda. Dalam panduan ini, kami akan menjalankan proses melaksanakan zarah-tindak balas dalam projek anda.
Pemasangan
Pertama, anda perlu memasang pakej yang diperlukan. Buka terminal anda dan jalankan arahan berikut:

npm install tsparticles @tsparticles/react

Ini akan memasang kedua-dua pustaka tspartikel teras dan pembalut React.
Mencipta Komponen Zarah
Cipta fail baharu dalam direktori komponen anda, contohnya, Particle.js. Fail ini akan mengandungi konfigurasi untuk sistem zarah anda.
Berikut ialah kod untuk komponen Zarah:

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,
          }}
        />
      )}
    </>
  );
}

Mari kita pecahkan bahagian utama komponen ini:

Permulaan: Cangkuk useEffect memulakan enjin zarah apabila komponen dipasang.
Rendering: Komponen Zarah hanya dipaparkan selepas pemulaan (keadaan init adalah benar).
Konfigurasi: Pilihan prop komponen Zarah mengandungi semua konfigurasi untuk sistem zarah. Ini termasuk tetapan interaktiviti, penampilan zarah, pergerakan dan banyak lagi.
_
Menggunakan Komponen Zarah_
Untuk menggunakan komponen ini dalam aplikasi React anda, hanya import dan jadikannya di tempat yang anda mahu zarah muncul. Contohnya, dalam App.js anda:

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

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

export default App;

Penyesuaian
Objek pilihan dalam komponen Zarah ialah tempat anda boleh menyesuaikan tingkah laku dan penampilan zarah anda. Berikut ialah beberapa bidang utama yang boleh anda ubah suai:

• Warna: Tukar warna.nilai dalam objek zarah untuk menetapkan warna zarah yang berbeza.
• Bentuk: Ubah suai bentuk.jenis untuk menggunakan bentuk zarah yang berbeza (cth., "segi empat sama", "segi tiga").
• Nombor: Laraskan nombor.nilai untuk menambah atau mengurangkan bilangan zarah.
• Pergerakan: Tukar tetapan dalam objek bergerak untuk mengubah cara zarah bergerak.
• Interaktiviti: Ubah suai objek interaktiviti untuk menukar cara zarah bertindak balas kepada input pengguna.

Pertimbangan Prestasi
Walaupun zarah boleh mencipta kesan visual yang menarik, ia juga boleh menjadi intensif sumber. Pertimbangkan petua berikut:

Hadkan bilangan zarah untuk prestasi yang lebih baik pada peranti kelas bawah.
Gunakan pilihan fpsLimit untuk mengehadkan kadar bingkai.
Uji pada pelbagai peranti untuk memastikan prestasi lancar.
_
Kesimpulan_
React-tsparticles menawarkan cara yang fleksibel untuk menambah latar belakang dinamik dan interaktif pada aplikasi React anda. Dengan mengikuti panduan ini, anda kini seharusnya mempunyai pelaksanaan tspartikel yang berfungsi dalam projek anda. Eksperimen dengan konfigurasi yang berbeza untuk mencipta kesan zarah yang sempurna untuk aplikasi anda!
Ingat, kunci untuk menguasai zarah tindak balas adalah percubaan. Jangan takut untuk bermain-main dengan tetapan yang berbeza untuk mencapai kesan yang unik dan menawan.

Atas ialah kandungan terperinci Melaksanakan tspartikel React dalam laman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!