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用於維護該項目。
