前端【免費(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點(diǎn)擊查看免費(fèi)下載導(dǎo)讀tsparticles/template-particles是 tsParticles 官方倉(cāng)庫(kù)中內(nèi)置的基礎(chǔ)粒子動(dòng)畫項(xiàng)目模板配合create-tsparticles-app腳手架命令使用可以在數(shù)秒內(nèi)生成一個(gè)帶有全屏粒子動(dòng)畫的完整前端項(xiàng)目并支持 React、Vue、Angular、Svelte 等 20 余種框架。本文以 templates/particles/README.md 為骨架結(jié)合模板源碼配置生成腳本、各框架入口文件、模板依賴清單展開讀完你將掌握模板的目錄結(jié)構(gòu)與工作原理、默認(rèn)粒子效果的每一個(gè)配置項(xiàng)、多框架集成的寫法差異以及如何基于該模板快速定制自己的粒子動(dòng)畫項(xiàng)目。模板定位一個(gè)可腳手架化的基礎(chǔ)粒子動(dòng)畫起點(diǎn)tsparticles/template-particles在倉(cāng)庫(kù)中位于 templates/particles其 README 的定義非常明確tsParticles base particles template. Use withcreate-tsparticles-appto scaffold a new project with a full-screen particle animation.也就是說這個(gè)模板解決的核心問題是免去從零配置 tsParticles 的繁瑣步驟。它預(yù)置了引擎依賴、粒子預(yù)設(shè)配置、示例頁面骨架以及各主流框架的組件封裝讓開發(fā)者拿到手即可npm install npm run dev運(yùn)行一個(gè)帶粒子背景的頁面再在此基礎(chǔ)上修改顏色、數(shù)量、運(yùn)動(dòng)方式等參數(shù)。從倉(cāng)庫(kù)結(jié)構(gòu)看同級(jí)的 templates/confetti、templates/ribbons、templates/landing 等模板各自對(duì)應(yīng)一類視覺效果彩帶、絲帶、落地頁等而particles模板承擔(dān)的是最通用的基礎(chǔ)粒子場(chǎng)景——圓形粒子連線網(wǎng)絡(luò)這也是 tsParticles 官方演示中最經(jīng)典的形態(tài)。模板目錄結(jié)構(gòu)模板本體 框架變體templates/particles目錄內(nèi)部分為兩層模板元信息層README.md、package.json、template.json、CHANGELOG.md、scripts/prebuild.js實(shí)際模板內(nèi)容層template/目錄下按框架拆分的 21 個(gè)變體template/下的框架變體包括angular、angular-confetti、angular-fireworks、astro、ember、inferno、jquery、lit、nextjs、nuxt2、nuxt3、nuxt4、preact、qwik、react、riot、solid、stencil、svelte、vanilla、vue2、vue3、webcomponents。其中vanilla變體是無框架的基準(zhǔn)實(shí)現(xiàn)HTML TypeScript Vite其余變體則是對(duì)應(yīng)框架的組件化封裝所有變體共享同一份粒子效果配置只是載體不同。這種一份效果、多框架載體的設(shè)計(jì)使得無論團(tuán)隊(duì)使用何種技術(shù)棧都能從模板中獲得一致的粒子動(dòng)畫體驗(yàn)。模板依賴清單template.json 與版本解析機(jī)制模板的依賴并非寫在某個(gè)package.json中而是集中聲明在 templates/particles/template.json腳手架生成項(xiàng)目時(shí)會(huì)讀取它來組裝目標(biāo)項(xiàng)目的package.json{ package: { dependencies: { tsparticles/engine: ^4.1.3, tsparticles/particles: ^4.1.3 }, devDependencies: { typescript: ^6.0.3, vite: ^8.1.0 } } }三個(gè)關(guān)鍵依賴各司其職tsparticles/engine粒子引擎核心負(fù)責(zé)容器、粒子生命周期、動(dòng)畫循環(huán)與渲染tsparticles/particles粒子 bundle預(yù)置插件組合通過其loadParticles方法把基礎(chǔ)粒子能力注入引擎vitetypescript開發(fā)與構(gòu)建工具鏈vanilla 變體 package.json 的腳本為dev: vite、build: tsc vite build、preview: vite preview。值得注意的是模板的版本解析機(jī)制。模板本體處于 monorepopnpm workspace中依賴在template.json里可能寫為workspace:*這類占位符而 scripts/prebuild.js 會(huì)在發(fā)布前自動(dòng)把 workspace 依賴替換為真實(shí)版本號(hào)它讀取engine/package.json與bundles/particles/package.json的實(shí)際版本將^、~、*等范圍解析為形如^4.3.3的精確 semver 范圍保證發(fā)布到 npm 后模板可獨(dú)立安裝使用。從源碼結(jié)構(gòu)看prebuild在pnpm run build時(shí)自動(dòng)執(zhí)行見 templates/particles/package.json這一機(jī)制確保了倉(cāng)庫(kù)內(nèi)模板始終與引擎版本保持同步?？焖偕鲜钟?create-tsparticles-app 生成項(xiàng)目模板本身是腳手架的數(shù)據(jù)源實(shí)際使用方式是配合create-tsparticles-app命令。腳手架側(cè)的邏輯可參考 cli/commands/create-app/src/scaffold.ts它會(huì)定位到目標(biāo)模板目錄、讀取template.json組裝依賴、將template/下對(duì)應(yīng)框架的文件復(fù)制到目標(biāo)目錄并執(zhí)行占位符替換如把gitignore重命名為.gitignore、把{{projectName}}替換為實(shí)際項(xiàng)目名。生成后的項(xiàng)目使用方式非常直接這也是 vanilla 變體自帶 README.md 的說明npm install npm run dev隨后打開本地開發(fā)服務(wù)器地址即可看到全屏粒子動(dòng)畫頁面生產(chǎn)構(gòu)建使用npm run build預(yù)覽構(gòu)建產(chǎn)物使用npm run preview。默認(rèn)粒子效果逐項(xiàng)解析所有框架變體共享同一份默認(rèn)粒子配置其源配置完整保留在 vanilla 變體的 src/main.ts 中。這段配置是理解模板行為的關(guān)鍵逐項(xiàng)說明如下import ./style.css; import { tsParticles } from tsparticles/engine; import { loadParticles } from tsparticles/particles; (async () { await loadParticles(tsParticles); await tsParticles.load({ id: tsparticles, options: { background: { color: { value: #0d0d2b } }, fpsLimit: 120, particles: { number: { value: 80, density: { enable: true } }, color: { value: #ffffff }, shape: { type: circle }, opacity: { value: 0.5 }, size: { value: { min: 1, max: 5 } }, links: { enable: true, distance: 150, color: #ffffff, opacity: 0.3, width: 1, }, move: { enable: true, speed: 2, direction: none, random: false, straight: false, outModes: { default: bounce }, }, }, interactivity: { events: { onHover: { enable: true, mode: repulse }, onClick: { enable: true, mode: push }, }, modes: { repulse: { distance: 100, duration: 0.4 }, push: { quantity: 4 }, }, }, detectRetina: true, }, }); })();初始化流程先await loadParticles(tsParticles)將粒子 bundle 注冊(cè)進(jìn)引擎這一調(diào)用來自tsparticles/particles再await tsParticles.load({ id, options })創(chuàng)建容器。id: tsparticles是容器標(biāo)識(shí)也是動(dòng)畫掛載的 DOM 占位標(biāo)識(shí)頂層配置項(xiàng)detectRetina: true啟用視網(wǎng)膜屏幕適配fpsLimit: 120限制動(dòng)畫幀率上限避免高刷屏下過度消耗性能。particles 塊粒子本體number.value: 80粒子總數(shù)density.enable: true開啟密度自適應(yīng)粒子數(shù)會(huì)隨畫布面積按比例調(diào)整color.value: #ffffff白色粒子shape.type: circle圓形形狀這也是最省渲染開銷的形狀之一opacity.value: 0.5半透明粒子size.value: { min: 1, max: 5 }粒子尺寸在 15 像素間隨機(jī)分布links塊開啟粒子連線網(wǎng)絡(luò)distance: 150表示距離小于 150px 的粒子之間繪制連線width: 1為線寬連線顏色與透明度分別為#ffffff與0.3——這就是經(jīng)典粒子星云網(wǎng)絡(luò)視覺效果的來源move塊speed: 2像素/幀的勻速運(yùn)動(dòng)direction: none無固定方向random: false非隨機(jī)起始方向straight: false允許曲線運(yùn)動(dòng)outModes.default: bounce粒子觸達(dá)畫布邊緣時(shí)反彈回場(chǎng)內(nèi)。interactivity 塊鼠標(biāo)交互懸停onHover.enable: true且mode: repulse鼠標(biāo)靠近時(shí)粒子被排斥開形成氣浪效果repulse.distance: 100是排斥半徑duration: 0.4為排斥力持續(xù)秒數(shù)點(diǎn)擊onClick.enable: true且mode: push每點(diǎn)擊一次在鼠標(biāo)位置新增粒子push.quantity: 4為每次點(diǎn)擊新增的粒子數(shù)量。頁面骨架與樣式vanilla 變體的 index.html 提供了一個(gè)居中顯示的標(biāo)題占位div idapph1tsParticles/h1/div粒子畫布作為全屏背景鋪在其后style.css 通過body { margin: 0; overflow: hidden; }消除頁面邊距與滾動(dòng)條并用絕對(duì)定位 transform將標(biāo)題居中pointer-events: none保證文字層不阻擋鼠標(biāo)事件穿透到粒子畫布。多框架集成寫法對(duì)比模板的價(jià)值在于同一配置、隨處復(fù)用。以 React 與 Vue3 變體為例可以看出封裝差異ReactApp.tsx使用官方 React 組件庫(kù)tsparticles/react通過ParticlesProvider包裹應(yīng)用并傳入init回調(diào)完成loadParticles(engine)注冊(cè)再用Particles idtsparticles options{options} /聲明粒子容器options的類型為ISourceOptionsasync function init(engine: Engine): Promisevoid { await loadParticles(engine); } const options: ISourceOptions { /* 與上文完全一致的配置 */ }; export default function App() { return ( ParticlesProvider init{init} div idapph1tsParticles/h1/div Particles idtsparticles options{options} / /ParticlesProvider ); }Vue3App.vue使用script setupvue-particles組件options通過:options綁定傳入script setup langts import type { ISourceOptions } from tsparticles/engine; const options: ISourceOptions { /* 同一份配置 */ }; /script template div idapph1tsParticles/h1/div vue-particles idtsparticles :optionsoptions / /templatevanilla則直接調(diào)用引擎 APItsParticles.load()。三種寫法的配置對(duì)象完全一致變化的只是如何把配置交給引擎這一層——這正是模板設(shè)計(jì)上刻意保持的一致性方便開發(fā)者跨框架遷移經(jīng)驗(yàn)。其余變體Angular、Svelte、Solid、Qwik、Web Components 等遵循各自框架的組件化方式可在template/目錄下按需查看。自定義與進(jìn)階使用拿到模板后最常見的定制路徑有三種改視覺效果編輯options中的particles塊——更換background.color.value、粒子color、shape.type如改為square、star或圖片/文字形狀、調(diào)整links.distance與opacity控制連線密度改交互行為在interactivity.modes中增加更多模式或?qū)nHover.mode改為grab、bubble等擴(kuò)展能力tsparticles/particles只是基礎(chǔ) bundle如需更多形狀、路徑、插件可在項(xiàng)目中額外安裝對(duì)應(yīng)包如tsparticles/shape-emoji、tsparticles/updater-twinkle等倉(cāng)庫(kù)的 shapes、updaters、plugins 目錄均有對(duì)應(yīng)源碼與文檔并在loadParticles之后追加對(duì)應(yīng)的loadXxx注冊(cè)調(diào)用。修改后可通過npm run build用 TypeScript 編譯器做類型校驗(yàn)tsc環(huán)節(jié)確保配置對(duì)象符合ISourceOptions類型定義再以npm run preview預(yù)覽產(chǎn)物。小結(jié)templates/particles模板通過模板元信息 框架變體的結(jié)構(gòu)把 tsParticles 最經(jīng)典的基礎(chǔ)粒子效果做成了可一鍵腳手架化的起點(diǎn)template.json統(tǒng)一管理依賴prebuild.js自動(dòng)同步 monorepo 版本vanilla 變體沉淀出完整可復(fù)制的默認(rèn)配置各框架變體則提供了組件化封裝范例。無論是想要快速搭建粒子背景頁還是希望學(xué)習(xí) tsParticles 在不同框架下的集成范式這個(gè)模板都是最直接的參考實(shí)現(xià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/tsparticles點(diǎn)擊查看免費(fèi)下載相關(guān)推薦tsParticles Portfolio 模板用 create-tsparticles-app 快速搭建粒子動(dòng)畫簡(jiǎn)歷站tsParticles Portfolio 模板用 create tsparticles app 快速搭建粒子動(dòng)畫簡(jiǎn)歷站 本指南圍繞倉(cāng)庫(kù)中的 template前端tsParticles React TypeScript 模板cra-template-particles-typescript使用指南一行命令創(chuàng)建粒子動(dòng)畫 React 應(yīng)用tsParticles React TypeScript 模板cra template particles typescript使用指南一行命令創(chuàng)建粒子動(dòng)前端使用 tsParticles 官方 React 模板搭建粒子效果應(yīng)用cra-template-particles 從創(chuàng)建到定制使用 tsParticles 官方 React 模板搭建粒子效果應(yīng)用cra template particles 從創(chuàng)建到定制 cra template pa前端創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考