就用它了！炫酷的粒子动画特效轻松搞定

哈喽，大家好！我是前端实验室的小师妹!

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。

传统的粒子动画主要由 Canvas、WebGL 实现，我们经常用来用作网站的动画背景。

今天介绍一个可以轻松创建高度可定制的粒子动画库。

tsParticles

TypeScript Particles 是在 particles.js 基础上重写的一个库，目的是更容易地创建更多的背景动画，并提供更多的实用程序和支持功能。

这个库最大的亮点在于它可以用于许多不同的框架，例如 React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery等等JS框架、Web组件。

安装

npm

npm install tsparticles-engine

yarn

yarn add tsparticles-engine

pnpm

pnpm install tsparticles-engine

引入

从版本1.12.11开始使用import和require导入tsParticles了。

const tsParticles = require("tsparticles-engine");

// or

import { tsParticles } from "tsparticles-engine";

使用

index.html

<div id="tsparticles"></div>

<script src="tsparticles.engine.min.js"></script>

app.js

tsParticles
    .loadJSON("tsparticles", "presets/default.json")
    .then(container => {
        console.log("callback - tsparticles config loaded");
    })
    .catch(error => {
        console.error(error);
    });

tsparticles 可以通过不同的参数来配置显示出来的不同粒子效果。简单一点的有：粒子形状、点击页面分裂粒子、鼠标箭头排斥粒子等。只要你会用，你就能玩出不同的骚操作。

比较明显的缺点就是参数太多了...如果你对这个库感兴趣，不妨阅读下官方的文档，尝试做出不一样的粒子效果~

GitHub地址:https://github.com/matteobruni/tsparticles 官网地址:https://particles.js.org/ 更多demo地址:https://codepen.io/collection/DPOage