在 React JS 中创建粒子动画

react jsjavascript libraryfront end technology更新于 2025/11/19 7:40:17

"粒子动画"是游戏物理、动态图形和计算机图形学中的一项技术，它使用许多微小的精灵、3D 模型或其他图形对象来模拟某些类型的"模糊"现象。

在本文中，我们将了解如何在 React JS 中制作流行的粒子动画。我们将使用名为 "react-tsparticles" 的第三方包来实现这一点。

首先创建一个 React 项目 −

npx create-react-app tutorialpurpose

转到项目目录 −

cd tutorialpurpose

示例

下载并安装 "react-tsparticles" 包 −

npm install react-tsparticles react

我们将使用此包添加具有不同样式元素的默认粒子动画。您还可以添加 ID 和不同的选项，例如粒子速度、粒子颜色、背景颜色、粒子数量、粒子大小等。

在 App.js 中添加以下代码行 −

import Particles from "react-tsparticles";
import React from "react";
export default class App extends React.Component {
   constructor(props) {
      super(props);
   }

   render() {
      return (
         <Particles
            id="tsparticles"
            options={{
               background: {
                  color: {
                     value: "#0000",
                  },
               },
               fpsLimit: 60,
               interactivity: {
                  detectsOn: "canvas",
                  events: {
                     onClick: {
                        enable: true,
                        mode: "push",
                     },
                     onHover: {
                        enable: true,
                        mode: "repulse",
                     },
                     resize: true,
                  },
                  modes: {
                    bubble: {
                       distance: 400,
                       duration: 2,
                       opacity: 0.8,
                       size: 40,
                   },
                   push: {
                      quantity: 4,
                   },
                   repulse: {
                      distance: 200,
                      duration: 0.4,
                   },
                },
             },
             particles: {
                color: {
                   value: "#fff",
                },
                links: {
                   color: "#ffffff",
                   distance: 150,
                   enable: true,
                   opacity: 0,
                   width: 1,
                },
                collisions: {
                   enable: true,
                 },
                 move: {
                    direction: "none",
                    enable: true,
                    outMode: "bounce",
                    random: false,
                    speed: 5,
                    straight: false,
                 },
                 number: {
                    density: {
                       enable: true,
                       value_area: 800,
                    },
                    value: 300,
                 },
                 opacity: {
                    value: 0.5,
                 },
                 shape: {
                    type: "circle",
                  },
                  size: {
                     random: true,
                     value: 5,
                  },
               },
               detectRetina: true,
            }}
         />
      );
   }
}