給網(wǎng)頁(yè)加粒子背景只要10分鐘tsParticles 粒子動(dòng)畫(huà)庫(kù)實(shí)戰(zhàn)指南【免費(fèi)下載鏈接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ts/tsparticlestsParticles 是一個(gè)零第三方依賴(lài)的 TypeScript 粒子動(dòng)畫(huà)庫(kù)用幾行配置就能在網(wǎng)頁(yè)上跑出彩屑、煙花、雪花這類(lèi)動(dòng)態(tài)背景并自帶 React、Vue、Angular、Svelte、jQuery 等框架的官方組件。如果你不想自己啃 Canvas 動(dòng)畫(huà)循環(huán)、碰撞和幀率控制又不滿(mǎn)足于靜態(tài)背景圖它就是最省事的那條路。它替你省掉了哪些事自己用 Canvas 寫(xiě)粒子效果至少要處理這幾件事每幀的requestAnimationFrame循環(huán)、粒子出生與回收、位置越界后的重入邏輯、Retina 屏幕的像素縮放、多實(shí)例的生命周期管理。tsParticles 把這些全部封裝在引擎內(nèi)部核心代碼在 engine/src/Core/ 的Container.ts、Particle.ts、Engine.ts里你只負(fù)責(zé)寫(xiě)一份 JSON 風(fēng)格的配置。另外它按功能拆包不需要的形狀、交互、插件就不裝包體積由你自己說(shuō)了算而不是被一個(gè)全家桶拖累首屏。裝兩個(gè)包跑通第一個(gè)粒子背景不需要建框架項(xiàng)目一個(gè)npm install就能開(kāi)始npm install tsparticles/engine tsparticles/slimslim是最常用的組合包包含基礎(chǔ)粒子、連線、常見(jiàn)交互。HTML 里放一個(gè)空 div然后初始化import { tsParticles } from tsparticles/engine; import { loadSlim } from tsparticles/slim; await loadSlim(tsParticles); await tsParticles.load({ id: tsparticles, options: { background: { color: #0d1117 }, particles: { number: { value: 60 }, move: { enable: true }, }, }, });注意順序必須先loadSlim或?qū)?yīng)的 bundle再load這是新手最常踩的坑后文還會(huì)再提一次。跑起來(lái)后是一個(gè)深色背景上緩慢漂移的粒子層粒子數(shù)量、顏色、速度都可以直接在options里改改完刷新即可看到結(jié)果。用 preset 三行換一套現(xiàn)成效果從零調(diào)參容易但更常見(jiàn)的做法是直接套官方預(yù)設(shè)然后只覆蓋自己關(guān)心的字段。倉(cāng)庫(kù)里 presets/ 目錄有 20 套matrix數(shù)字雨、snow雪、fire火焰、fireworks煙花、confetti彩屑、links連線等每套對(duì)應(yīng)一個(gè) npm 包比如tsparticles/preset-matrix。以 matrix 數(shù)字雨為例import { loadMatrixPreset } from tsparticles/preset-matrix; await loadMatrixPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: matrix }, });想微調(diào)時(shí)在options里加字段就行preset 里沒(méi)寫(xiě)的會(huì)保持默認(rèn)寫(xiě)了的會(huì)被你的值覆蓋。比如把粒子形狀從字符換成方塊options: { preset: fire, particles: { shape: { type: square } }, }這套預(yù)設(shè)打底 局部覆蓋的模式適用于所有 preset也是官方 demo 頁(yè)面的實(shí)現(xiàn)方式。想看每套預(yù)設(shè)長(zhǎng)什么樣直接翻 presets/ 下各目錄的images/sample.png。讓粒子跟著鼠標(biāo)動(dòng)靜態(tài)背景看完會(huì)膩交互才是粒子背景的意義。interactivity一節(jié)聲明什么事件觸發(fā)什么模式modes一節(jié)再聲明模式的具體參數(shù)。以懸停排斥 點(diǎn)擊推入粒子為例options: { interactivity: { events: { onHover: { enable: true, mode: repulse }, onClick: { enable: true, mode: push }, }, modes: { repulse: { distance: 120, duration: 0.4 }, push: { quantity: 4 }, }, }, };除了repulse/push內(nèi)置模式還有attract吸引、grab牽引、bubble氣泡放大、bounce彈開(kāi)等全部在 interactions/external/ 下有獨(dú)立實(shí)現(xiàn)和說(shuō)明文檔。每種模式的可用參數(shù)距離、時(shí)長(zhǎng)、影響半徑都能在 markdown/Options.md 的 Interactivity 章節(jié)查到?？蚣茼?xiàng)目怎么接每個(gè)框架的用法都遵循同一個(gè)模式裝一個(gè)tsparticles/框架名組件包在組件的初始化回調(diào)里調(diào)用loadSlim或 preset 的加載函數(shù)把options傳給組件屬性。以 React 為例Next.js 項(xiàng)目用tsparticles/nextjs而非 react 包import Particles from tsparticles/react; import { loadSlim } from tsparticles/slim; const particlesInit async (engine) { await loadSlim(engine); }; Particles idtsparticles init{particlesInit} options{options} /其他框架同理組件源碼都能對(duì)照倉(cāng)庫(kù)里的 demo/ 目錄看比如 demo/react/、demo/vue3/、demo/angular/ 都是可直接pnpm install后跑起來(lái)的完整示例。Vue 2/3、Angular、Svelte、Preact、Solid、jQuery、Web Components 的組件包都列在 README 的框架清單 里包名即框架名按名取用即可。四個(gè)高頻坑先知道能省半天load 順序反了tsParticles.load()在loadSlim/loadMatrixPreset之前執(zhí)行會(huì)報(bào)缺少插件。所有初始化函數(shù)必須 await 完再 load。配置里混用舊版字段名particles.js 時(shí)代的value_area、fps_limit這類(lèi)蛇形命名已被density.value_area、fpsLimit等駝峰寫(xiě)法取代照抄老教程會(huì)靜默失效。字段對(duì)照可查 markdown/pjsMigration.md。一上來(lái)就堆幾千個(gè)粒子低端設(shè)備上幀率會(huì)崩。先看fpsLimit默認(rèn) 60和粒子數(shù)量再往上加pauseOnBlur和pauseOnOutsideViewport兩個(gè)開(kāi)關(guān)能幫后臺(tái)標(biāo)簽頁(yè)省資源。響應(yīng)式不是必須手寫(xiě)媒體查詢(xún)配置里的responsive數(shù)組按breakpoint分段覆蓋 options移動(dòng)端少放點(diǎn)粒子就夠了不用維護(hù)兩套配置。想深入倉(cāng)庫(kù)里的三張地圖配置全集markdown/Options.md 是根級(jí)選項(xiàng)總表markdown/Options/下每個(gè)選項(xiàng)組顏色、連線、軌跡、生命周期都有獨(dú)立說(shuō)明頁(yè)按目錄名找。預(yù)設(shè)目錄presets/ 下每套效果都有README.md說(shuō)明依賴(lài)哪些包和images/sample.png效果圖抄配置前先看一眼。引擎源碼engine/src/Core/ 里Container.ts管實(shí)例生命周期、Particle.ts管單個(gè)粒子、RenderManager.ts管繪制想理解這個(gè)選項(xiàng)為什么沒(méi)生效時(shí)從這三個(gè)文件入手。如果要把整個(gè)倉(cāng)庫(kù)拉下來(lái)邊跑邊讀命令如下git clone https://gitcode.com/GitHub_Trending/ts/tsparticles下一步建議打開(kāi) demo/vanilla_new/index.html 在瀏覽器里瀏覽全部預(yù)設(shè)的實(shí)時(shí)效果挑一個(gè)最接近你需求的 preset從它的 README 抄出依賴(lài)清單按本文第二節(jié)的方法裝包改參10 分鐘內(nèi)就能得到可上線的背景層?！久赓M(fèi)下載鏈接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考