tsparticles
tsParticles 3.0.2
一个用于创建粒子的轻量级打字稿库。无依赖性（*），浏览器准备就绪并与React.js，Vue.js（2.x和3.x），Angular，Svelte，Jquery，jquery，proreact，Inferno，Riot.js，solid.js，solid.js和Web组件
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpress文档和开发参考
该库可在两个最受欢迎的CDN上找到，如果您使用的是粒子，它很容易且可以使用。
您会在下面找到所需的所有链接，并且不要被打字稿吓到，而只是源语言。
输出文件只是JavaScript 。 ？
CDN和npm具有JavaScript中所需的所有资源，捆绑包浏览器Ready（tsparticles.engine.min.js），以及用于import语法的所有文件。
如果您有兴趣，下面有一些简单的说明，可以指导您从旧的粒子库迁移。
请使用这些主机或您自己的项目在项目上加载tsparticle
https://unpkg.com/@tsparticles/confetti/ https://unpkggg.com.comn@tsparticles/engine/engine/https:/ https://unpkgg c.com/@tspresticles@@@@@@@@@@@@@@@@@@@@@@@@tttpsp :/ https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/
Tspartics五彩纸屑
Tsparticles发动机
tspracticles烟花
tsparticles Basic
tsparticles纤细
tspracticles
全部
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ;导入的tsParticles是使用<script>标签在页面中加入脚本时的实例。
加载tsparticles并配置粒子：
index.html
< div id =" tsparticles " > </ div >
< script src =" tsparticles.engine.min.js " > </ script >app.js
// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected
/* tsParticles.load(@params); */
tsParticles
. load ( {
id : "tsparticles" ,
url : "presets/default.json" ,
} )
. then ( container => {
console . log ( "callback - tsparticles config loaded" ) ;
} )
. catch ( error => {
console . error ( error ) ;
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : {
/* options here */
} ,
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
} ) ;
//random object
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
index : 1 ,
} ) ; //the second one
// Important! If the index is not in range 0...<array.length, the index will be ignored.
// after initialization this can be used.
/* tsParticles.setOnClickHandler(@callback); */
/* this will be fired from all particles loaded */
tsParticles . setOnClickHandler ( ( event , particles ) => {
/* custom on click handler */
} ) ;
// now you can control the animations too, it's possible to pause and resume the animations
// these methods don't change the config so you're safe with all your configurations
// domItem(0) returns the first tsParticles instance loaded in the dom
const particles = tsParticles . domItem ( 0 ) ;
// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame
particles . play ( ) ;
// pause will stop the animations
particles . pause ( ) ; @tsparticles/angular可用的说明
astro-particles可用的说明
ember-tsparticles可用的说明
inferno-particles可用的说明
jquery-particles可用的说明
preact-particles可用的说明
@tsparticles/react可用的说明
riot-particles您可以在这里找到说明
solid-particles您可以在这里找到说明
@tsparticles/svelte可用的说明
@tsparticles/vue2可用的说明
@tsparticles/vue3这里可用的说明
web-particles您可以在这里找到说明
@tsparticles/wordpress可以在此处找到wordpress.org上托管的插件页面
实际上，官方的Tsparticles插件不存在，但是我与Premium Addons for Elementor进行了协作。
可以在此存储库中使用一些预设，并且还包含一个包含运行所需的所有内容的捆绑文件。
这种预设会在白色背景上加载大彩色圆圈。
您可以在这里找到说明
这种预设会在白色背景下从屏幕底部的彩色气泡加载。
您可以在这里找到说明
该预设负载从透明背景从屏幕中心发射的白色和红色五彩纸屑。
您可以在这里找到说明
这种预设将褪色的红色加载到黑色背景，并带有颜色，例如火和灰烬火花。
您可以在这里找到说明
这种预设装载了用小褪色颗粒（如小萤火虫）制成的鼠标径。
您可以在这里找到说明
这种预设会加载美丽的烟花效应。
您可以在这里找到说明
您可以在这里找到说明
您可以在这里找到说明
您可以在这里找到说明
您可以在这里找到说明
您可以在这里找到说明
您可以在这里找到说明
您可以在此处找到一些与Tsparticles相关的模板。这些模板是为香草JavaScript ， ReactJ ， Vuejs ， Angular ， Sveltejs和其他框架创建的。
这些模板将会有所不同，可以创建新的模板，也可以使用最新功能更新或更改为更好的样式。偶尔检查一下。
如果您使用Tspresticles创建了一些良好的设计，可以随意提交带有酷模板的拉动请求，您将被视为模板作者！
https://github.com/tsparticles/templates
https://particles.js.org/samples
您可以在此处的网站上找到所有视频教程：https：//particles.js.org/video.html
更多视频即将推出！每天检查是否有一些新内容。
粒子
您可以在此处找到一些配置样本
您可以在此处找到所有可用的选项
我在Codepen上创建了一个Tsparticles集合？或者您可以查看我的个人资料
否则，下面有演示页面链接。
想看到更多的演示吗？克隆计算机上的存储库并按照以下说明
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm start繁荣！ ？ http：// localhost：3000，您可以查看其他演示。
如果您足够勇敢，则可以切换到dev部门来尝试开发的功能。
tsparticles的软件包使该库100％与粒子兼容。
认真地说，您只需要将脚本从粒子js更改为捆绑的兼容套件，et-voilà，您准备好了吗？
您可以在这里阅读更多
想知道进行切换的5个理由吗？在这里阅读
在下面，您可以找到安装Tsparticles及其新语法所需的所有信息。
Tsparticles现在支持一些自定义？。
您可以创建自己的插件
在这里阅读更多...
流程图TD
子图核[核心]
发动机[tsparticles发动机]
perlin-noise [perlin噪声lib]
单纯噪声[单纯噪声lib]
configs [tsparticles配置]
结尾
子图束基准[tsparticles basic]
子图基本转移[Movers]
移动基础[基础]
结尾
子图基本形状[形状]
形状圆[圆]
结尾
子图基本升级[更新器]
更新颜色[颜色]
更新者 - 宽松[不透明度]
Updater-Out-Modes [OUT模式]
更新者大小[尺寸]
结尾
结尾
引擎 - >束基准
子图捆绑包[Tsparticles五彩纸屑]
五彩纸条插图[插件]
插件发射器
插件运动
结尾
子图五彩形状[形状]
形状卡
Shape-emoji
形状心
形状图像
Shape-Polygon
形状方
Shape-Star
结尾
五彩纸屑 - 更新者]
更新生命
更新者滚动
更新者旋转
更新倾斜
更新流媒体
结尾
结尾
束基准 - >捆绑包
子图束slim [tsparticles slim]
子图纤维互动[相互作用]
子图纤维互动 - 外部[外部]
互动 - 外部 - 吸引[吸引]
交互 - 外部弹跳[弹跳]
相互作用 - 外部气泡[气泡]
交互 - 外部连接[连接]
互动 - 外部 - grab [grab]
交互 - 外部临时[暂停]
互动 - 外部孔[push]
交互 - 外部示例[删除]
相互作用 - 外部重复[repulse]
交互 - 外部慢[慢]
结尾
子图纤维互动粒子[颗粒]
互动粒子 - 吸引[吸引]
互动粒子 - 收集[碰撞]
交互粒子 - 链接[链接]
结尾
结尾
子图纤毛转移[Movers]
Move-Parallax [andallax]
结尾
子图Slim-Plugins [插件]
子图slim-plugins-eashings [轻松]
插件 - Quad [Quad]
结尾
结尾
子图纤维形状[形状]
shape-emoji [emoji]
形状图像[图像]
形状线[线]
Shape-Polygon [Polygon]
形状平方[正方形]
Shape-Star [Star]
结尾
子图Slim-Updaters [更新者]
更新生命[生命]
更新 - 旋转[旋转]
更新流式颜色[中风颜色]
结尾
结尾
捆绑式基础 - >捆绑包
子图捆绑式工程[tsparticles烟花]
子图烟花效应[效果]
效果轨道
结尾
子图烟花 - 插拉器[插件]
插件发射器
子图烟花 - 斑块 - 发射机形状[发射器形状]
插件 - 发射机形状平方
结尾
插件可以
结尾
子图烟花 - 升级器[更新器]
更新流失
更新生命
更新者旋转
结尾
结尾
捆绑式 - >捆绑式工程
子图束 - 满足[tsparticles]
子图完全相互作用[互动]
子图全互动 - 外部[外部]
交互 - 外部 - 轨道[trail]
结尾
结尾
子图全插图[插件]
插件吸收器[吸收器]
插件发射器[发射器]
子图全插曲 - 发射器形状[发射器形状]
插件 - 发射器形状圈[圆圈]
插件 - 发射器形状方[Square]
结尾
结尾
子图全形[形状]
形状文本[文本]
结尾
子图全级别[更新器]
distater Destroy [销毁]
换卷[卷]
更新倾斜[倾斜]
twinkle [twinkle]
更新流媒体[Wobble]
结尾
结尾
捆绑包 - >捆绑包
子图束 - 所有[tsparticles]
Bundle-pjs [tsparticles粒子兼容性]
子图全效应[效果]
效果泡[气泡]
效果 - 手段[trail]
结尾
子图全互动[相互作用]
子图全互动 - 外部[外部]
相互作用 - 外部粒子[粒子]
交互 - 外部流行[POP]
结尾
相互作用[光]
亚图全界粒子[颗粒]
相互作用粒子re缩[repulse]
结尾
结尾
子图全路径[路径]
路径 - 卷 - 噪声[卷曲噪声]
路径曲线[曲线]
路径 - 珀林 - 噪声[Perlin噪声]
疗法[Polygon]
路径 - 简单噪声[单纯噪声]
路径SVG [SVG]
结尾
子图全插图[插件]
插件式面具[帆布蒙版]
亚图全插图[宽松]
插件折叠[Back]
插件 - circ [Circ]
插件式立方体[立方]
插件启用[Expo]
插入线线[线性]
插件句号[夸脱]
插件Quint [Quint]
插件 - 孔[正弦]
结尾
子图全斑蛋白发射器形状[发射器形状]
插件 - 发射器形状胶片[画布]
插件 - 发射机形状路径[路径]
插件 - 发射器形状 - 多角形[Polygon]
结尾
子图全插图[出口]
插件 - 外观图像[图像]
插件 - export-json [json]
插件 - export-video [视频]
结尾
插件-HSV色[HSV颜色]
插件感染[感染]
插件运动[运动]
插件 - 波森碟[泊松盘]
插件 - polygon面具[多边形面膜]
插件声[Sounds]
结尾
子图全形[形状]
Shape-Arrow [箭头]
形状卡[卡]
Shape-cog [COG]
形状心[心脏]
形状路径[路径]
形状连接的polygon [圆形多边形]
形状旋转的矩形[圆形矩形]
形状刺激[螺旋]
结尾
子图全级别[Updaters]
更新者梯度[梯度]
更新轨[轨道]
结尾
简单 - >路径 - 卷 - 噪声
perlin-noise-> path-perlin-noise
单纯噪声 - >途径简单
结尾
捆绑包 - >捆绑包
非常感谢Jetbrains的2020-2022开源许可证！
Jetbrains Webstorm用于维护该项目。
