react-tsparticles 生成动态特效背景

悠悠 2024-03-31 16:33 85阅读 0赞

## 1.依赖 ##

{
      "name": "tsparticles",
      "version": "1.0.0",
      "description": "",
      "keywords": [],
      "main": "src/index.js",
      "dependencies": {
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-scripts": "3.0.1",
        "react-tsparticles": "1.33.3"
      },
      "devDependencies": {
        "typescript": "3.3.3"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      },
      "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
      ]
    }

## 2.自定义MyParticle组件 ##

import { useCallback } from "react";
    import Particles from "react-tsparticles";
    import { loadFull } from "tsparticles";
    
    const MyParticle = () => {
      const particlesInit = useCallback(async (engine) => {
        console.log(engine);
    
        debugger;
        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        await loadFull(engine);
      }, []);
    
      const particlesLoaded = useCallback(async (container) => {
        await console.log(container);
      }, []);
    
      return (
        <Particles
          id="tsparticles"
          init={particlesInit}
          loaded={particlesLoaded}
          options={
       {
            autoPlay: true,
            background: {
              color: {
                value: "#323031"
              },
              image: "",
              position: "50% 50%",
              repeat: "no-repeat",
              size: "cover",
              opacity: 1
            },
            backgroundMask: {
              composite: "destination-out",
              cover: {
                color: {
                  value: "#fff"
                },
                opacity: 1
              },
              enable: false
            },
            defaultThemes: {},
            delay: 0,
            fullScreen: {
              enable: true,
              zIndex: -1 //背景后置显示
            },
            detectRetina: true,
            duration: 0,
            fpsLimit: 120,
            interactivity: {
              detectsOn: "window",
              events: {
                onClick: {
                  enable: true,
                  mode: "push"
                },
                onDiv: {
                  selectors: [],
                  enable: false,
                  mode: [],
                  type: "circle"
                },
                onHover: {
                  enable: true,
                  mode: "bubble",
                  parallax: {
                    enable: false,
                    force: 60,
                    smooth: 10
                  }
                },
                resize: {
                  delay: 0.5,
                  enable: true
                }
              },
              modes: {
                attract: {
                  distance: 200,
                  duration: 0.4,
                  easing: "ease-out-quad",
                  factor: 1,
                  maxSpeed: 50,
                  speed: 1
                },
                bounce: {
                  distance: 200
                },
                bubble: {
                  distance: 400,
                  duration: 2,
                  mix: false,
                  opacity: 1,
                  size: 40,
                  divs: {
                    distance: 200,
                    duration: 0.4,
                    mix: false,
                    selectors: []
                  }
                },
                connect: {
                  distance: 80,
                  links: {
                    opacity: 0.5
                  },
                  radius: 60
                },
                grab: {
                  distance: 400,
                  links: {
                    blink: false,
                    consent: false,
                    opacity: 1
                  }
                },
                push: {
                  default: true,
                  groups: [],
                  quantity: 4
                },
                remove: {
                  quantity: 2
                },
                repulse: {
                  distance: 200,
                  duration: 0.4,
                  factor: 100,
                  speed: 1,
                  maxSpeed: 50,
                  easing: "ease-out-quad",
                  divs: {
                    distance: 200,
                    duration: 0.4,
                    factor: 100,
                    speed: 1,
                    maxSpeed: 50,
                    easing: "ease-out-quad",
                    selectors: []
                  }
                },
                slow: {
                  factor: 3,
                  radius: 200
                },
                trail: {
                  delay: 1,
                  pauseOnStop: false,
                  quantity: 1
                },
                light: {
                  area: {
                    gradient: {
                      start: {
                        value: "#ffffff"
                      },
                      stop: {
                        value: "#000000"
                      }
                    },
                    radius: 1000
                  },
                  shadow: {
                    color: {
                      value: "#000000"
                    },
                    length: 2000
                  }
                }
              }
            },
            manualParticles: [],
            particles: {
              bounce: {
                horizontal: {
                  random: {
                    enable: false,
                    minimumValue: 0.1
                  },
                  value: 1
                },
                vertical: {
                  random: {
                    enable: false,
                    minimumValue: 0.1
                  },
                  value: 1
                }
              },
              collisions: {
                absorb: {
                  speed: 2
                },
                bounce: {
                  horizontal: {
                    random: {
                      enable: false,
                      minimumValue: 0.1
                    },
                    value: 1
                  },
                  vertical: {
                    random: {
                      enable: false,
                      minimumValue: 0.1
                    },
                    value: 1
                  }
                },
                enable: false,
                mode: "bounce",
                overlap: {
                  enable: true,
                  retries: 0
                }
              },
              color: {
                value: "#ffffff",
                animation: {
                  h: {
                    count: 0,
                    enable: false,
                    offset: 0,
                    speed: 1,
                    decay: 0,
                    sync: true
                  },
                  s: {
                    count: 0,
                    enable: false,
                    offset: 0,
                    speed: 1,
                    decay: 0,
                    sync: true
                  },
                  l: {
                    count: 0,
                    enable: false,
                    offset: 0,
                    speed: 1,
                    decay: 0,
                    sync: true
                  }
                }
              },
              groups: {},
              move: {
                angle: {
                  offset: 0,
                  value: 90
                },
                attract: {
                  distance: 200,
                  enable: false,
                  rotate: {
                    x: 600,
                    y: 1200
                  }
                },
                center: {
                  x: 50,
                  y: 50,
                  mode: "percent",
                  radius: 0
                },
                decay: 0,
                distance: {},
                direction: "none",
                drift: 0,
                enable: true,
                gravity: {
                  acceleration: 9.81,
                  enable: false,
                  inverse: false,
                  maxSpeed: 50
                },
                path: {
                  clamp: true,
                  delay: {
                    random: {
                      enable: false,
                      minimumValue: 0
                    },
                    value: 0
                  },
                  enable: false,
                  options: {}
                },
                outModes: {
                  default: "bounce",
                  bottom: "bounce",
                  left: "bounce",
                  right: "bounce",
                  top: "bounce"
                },
                random: false,
                size: false,
                speed: 6,
                spin: {
                  acceleration: 0,
                  enable: false
                },
                straight: false,
                trail: {
                  enable: false,
                  length: 10,
                  fillColor: {
                    value: "#000000"
                  }
                },
                vibrate: false,
                warp: false
              },
              number: {
                density: {
                  enable: true,
                  area: 800,
                  factor: 1000
                },
                limit: 0,
                value: 170
              },
              opacity: {
                random: {
                  enable: false,
                  minimumValue: 0.1
                },
                value: 1,
                animation: {
                  count: 0,
                  enable: false,
                  speed: 1,
                  decay: 0,
                  sync: false,
                  destroy: "none",
                  startValue: "random",
                  minimumValue: 0.1
                }
              },
              reduceDuplicates: false,
              shadow: {
                blur: 0,
                color: {
                  value: "#000"
                },
                enable: false,
                offset: {
                  x: 0,
                  y: 0
                }
              },
              shape: {
                options: {
                  character: {
                    fill: false,
                    font: "Verdana",
                    style: "",
                    value: "*",
                    weight: "400"
                  },
                  char: {
                    fill: false,
                    font: "Verdana",
                    style: "",
                    value: "*",
                    weight: "400"
                  },
                  polygon: {
                    nb_sides: 5
                  },
                  star: {
                    nb_sides: 5
                  },
                  image: {
                    height: 32,
                    replace_color: true,
                    src: "https://particles.js.org/images/sars-cov-2.png",
                    width: 32
                  },
                  images: {
                    height: 32,
                    replace_color: true,
                    src: "https://particles.js.org/images/sars-cov-2.png",
                    width: 32
                  }
                },
                type: "image"
              },
              size: {
                random: {
                  enable: false,
                  minimumValue: 1
                },
                value: 16,
                animation: {
                  count: 0,
                  enable: false,
                  speed: 40,
                  decay: 0,
                  sync: false,
                  destroy: "none",
                  startValue: "random",
                  minimumValue: 0.1
                }
              },
              stroke: {
                width: 0,
                color: {
                  value: "#000000",
                  animation: {
                    h: {
                      count: 0,
                      enable: false,
                      offset: 0,
                      speed: 1,
                      decay: 0,
                      sync: true
                    },
                    s: {
                      count: 0,
                      enable: false,
                      offset: 0,
                      speed: 1,
                      decay: 0,
                      sync: true
                    },
                    l: {
                      count: 0,
                      enable: false,
                      offset: 0,
                      speed: 1,
                      decay: 0,
                      sync: true
                    }
                  }
                }
              },
              zIndex: {
                random: {
                  enable: false,
                  minimumValue: 0
                },
                value: 0,
                opacityRate: 1,
                sizeRate: 1,
                velocityRate: 1
              },
              life: {
                count: 0,
                delay: {
                  random: {
                    enable: false,
                    minimumValue: 0
                  },
                  value: 0,
                  sync: false
                },
                duration: {
                  random: {
                    enable: false,
                    minimumValue: 0.0001
                  },
                  value: 0,
                  sync: false
                }
              },
              rotate: {
                random: {
                  enable: false,
                  minimumValue: 0
                },
                value: 0,
                animation: {
                  enable: false,
                  speed: 0,
                  decay: 0,
                  sync: false
                },
                direction: "clockwise",
                path: false
              },
              destroy: {
                bounds: {},
                mode: "none",
                split: {
                  count: 1,
                  factor: {
                    random: {
                      enable: false,
                      minimumValue: 0
                    },
                    value: 3
                  },
                  rate: {
                    random: {
                      enable: false,
                      minimumValue: 0
                    },
                    value: {
                      min: 4,
                      max: 9
                    }
                  },
                  sizeOffset: true,
                  particles: {}
                }
              },
              roll: {
                darken: {
                  enable: false,
                  value: 0
                },
                enable: false,
                enlighten: {
                  enable: false,
                  value: 0
                },
                mode: "vertical",
                speed: 25
              },
              tilt: {
                random: {
                  enable: false,
                  minimumValue: 0
                },
                value: 0,
                animation: {
                  enable: false,
                  speed: 0,
                  decay: 0,
                  sync: false
                },
                direction: "clockwise",
                enable: false
              },
              twinkle: {
                lines: {
                  enable: false,
                  frequency: 0.05,
                  opacity: 1
                },
                particles: {
                  enable: false,
                  frequency: 0.05,
                  opacity: 1
                }
              },
              wobble: {
                distance: 5,
                enable: false,
                speed: {
                  angle: 50,
                  move: 10
                }
              },
              orbit: {
                animation: {
                  count: 0,
                  enable: false,
                  speed: 1,
                  decay: 0,
                  sync: false
                },
                enable: false,
                opacity: 1,
                rotation: {
                  random: {
                    enable: false,
                    minimumValue: 0
                  },
                  value: 45
                },
                width: 1
              },
              links: {
                blink: false,
                color: {
                  value: "#323031"
                },
                consent: false,
                distance: 150,
                enable: false,
                frequency: 1,
                opacity: 0.4,
                shadow: {
                  blur: 5,
                  color: {
                    value: "#000"
                  },
                  enable: false
                },
                triangles: {
                  enable: false,
                  frequency: 1
                },
                width: 1,
                warp: false
              },
              repulse: {
                random: {
                  enable: false,
                  minimumValue: 0
                },
                value: 0,
                enabled: false,
                distance: 1,
                duration: 1,
                factor: 1,
                speed: 1
              }
            },
            pauseOnBlur: true,
            pauseOnOutsideViewport: true,
            responsive: [],
            smooth: false,
            style: {},
            themes: [],
            zLayers: 100
          }}
        ></Particles>
      );
    };
    export default MyParticle;

## 3.App ##

import MyParticle from "./MyParticle";
    import "./styles.css";
    
    export default function App() {
      const myStyle = {
        color: "red",
        fontSize: "30px"
      };
    
      return (
        <div className="App">
          <h2 style={myStyle}>liuyunshengsir!</h2>
    
          <MyParticle>
            <h1>Hello CodeSandbox</h1>
          </MyParticle>
        </div>
      );
    }

## 4.效果 ##

![在这里插入图片描述][4f11478f8f964d258d12e2da664a534d.png]

## 5.参考 ##

https://particles.js.org/samples/index.html\#

[4f11478f8f964d258d12e2da664a534d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f50b94eefc264f439bbdf9d45f121ecd.png