在 Ember 应用中运行 tsParticles 粒子动画 Demo安装、启动与源码解析【免费下载链接】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.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticlestsParticles 是一个可高度自定义的 JavaScript 粒子效果库官方为 React、Vue、Angular、Svelte、Ember 等多种框架提供了现成的组件封装。本文以仓库中的 demo/ember 为例讲解如何在 Ember 工程中通过tsparticles/ember封装组件渲染链接粒子、雪花与彩带confetti动画涵盖完整的安装启动流程、package.json 脚本语义、组件用法与底层实现原理。读完本文你将能够在自己的 Ember 应用中独立接入 tsParticles并理解其按需初始化引擎、切换配置与主题、加载预设的完整调用链。Demo 概览一个组件三种效果demo/ember是一个独立的 Ember 演示应用standalone demo专门用于演示tsparticles/ember封装组件的用法。它的核心入口是 app/templates/application.hbs同一页面内通过Particles组件同时展示了三种粒子效果默认的**链接粒子links**效果使用 LINK_OPTIONS 配置圆形粒子之间绘制白色连线并开启碰撞**雪花snow**效果通过hash presetsnow直接以字符串形式引用 tsparticles/preset-snow 提供的雪花预设并设置fullScreen(hash enablefalse)关闭全屏模式使其固定在下方的容器区域内**彩带confetti**效果点击 Show confetti 按钮后按条件渲染使用 CONFETTI_OPTIONS 配置由 emitters 发射器持续喷射多种颜色的旋转粒子。演示页还提供 Switch config在链接与雪花配置间切换和 Theme在default与dark主题间切换两个按钮用于演示options与theme两个参数的响应式更新能力。安装与启动从仓库根目录运行README 给出的运行方式是从仓库根目录统一使用 pnpm 工作区workspace管理依赖。由于tsparticles/ember、tsparticles/engine、tsparticles/preset-snow、tsparticles等均通过workspace:*协议引用见 demo/ember/package.json因此必须先在本仓库根目录安装并构建依赖再进入 demo 目录启动pnpm i pnpm run build cd demo/ember pnpm start其中pnpm run build在仓库根目录执行用于构建 engine 与各依赖包的产物pnpm start则启动 Ember 开发服务器。启动成功后在浏览器中打开http://localhost:4200即可看到粒子动画页面。脚本语义与运行环境demo/ember/package.json 中定义了四个脚本对应pnpm script调用脚本实际命令作用pnpm startember serve启动 Ember 开发服务器默认端口 4200支持热重载pnpm buildember build构建演示应用开发模式产物pnpm build:ciember build --environment production以生产模式构建用于 CI 环境pnpm testember test运行基于 QUnit 的测试套件从源码结构看该 demo 的 Node 版本要求为14.* || 16.* || 18见 demo/ember/package.json并使用 TypeScripttypescript、ember-cli-typescript已列为依赖。测试基础设施方面testem.js 提供 Testem 配置配合ember-qunit、qunit-dom与ember/test-helpers完成组件级测试。组件调用方式模板中的ParticlesParticles组件来自tsparticles/ember封装。其模板实现位于 wrappers/ember/addon/components/particles.hbs核心是在一个div元素上挂载particlesmodifier并透传四个命名参数options粒子配置对象ISourceOptions用于控制粒子数量、形状、运动、碰撞、连接线等全部行为url可选的 JSON 配置文件地址与options二选一最终都会传给tsParticles.load()particlesLoaded容器加载完成后的回调函数theme主题名称字符串加载完成后通过container.loadTheme(theme)动态切换主题。Demo 中的应用层调用如下见 app/templates/application.hbsParticles classfixed-size-particles options{{this.options}} theme{{this.theme}} particlesLoaded{{this.loadedCallback}} / Particles classfixed-size-snow options{{hash presetsnow fullScreen(hash enablefalse)}} /注意雪花组件的写法options可以直接传一个内联hash其中preset字段指定要加载的预设名称这说明tsparticles/ember与 tsParticles 引擎的选项体系完全一致——预设名同样通过 options 下发。控制器逻辑引擎初始化、配置切换与主题切换演示应用的状态逻辑集中在 app/controllers/application.ts它是理解整套调用链的关键按需初始化引擎在构造函数中仅当typeof window ! undefined客户端环境时调用initParticlesEngine并在回调中同时注册loadFull(engine)加载全部功能与loadSnowPreset(engine)注册 snow 预设。源码注释明确说明这是为了兼容 Ember 的 FastBoot 服务端渲染场景——服务端没有window/document因此必须将引擎初始化延迟到客户端运行时。响应式状态tracked装饰器来自glimmer/tracking标记的options、theme、isConfettiVisible一旦变化模板会自动重渲染并将新值传入Particles。配置切换switchConfig在LINK_OPTIONS与SNOW_OPTIONS两个配置对象之间轮流切换可直观验证组件对options变化的响应。主题切换toggleTheme在default与dark之间切换this.theme配合theme参数触发loadTheme。其中loadedCallback接收一个Container参数即 tsParticles 的容器实例在 Demo 中打印一条日志可用于调试或获取粒子实例执行高级操作。源码解析modifier 与引擎初始化工具Particles modifier 的加载流程组件底层的实际逻辑在 wrappers/ember/addon/modifiers/particles.ts。ParticlesModifier.modify的执行流程揭示了引擎与容器的完整生命周期先await waitForParticlesEngineInitialization()确保引擎已完成初始化检查isParticlesEngineInitialized()若未初始化则抛出明确错误initParticlesEngine(...) must be called once before rendering Particles / components.——这提醒开发者使用Particles前必须至少调用一次initParticlesEngine销毁旧容器this.#container?.destroy()避免重复渲染时泄漏调用tsParticles.load({ id: element.id, options: options ?? {}, url })创建新容器其中容器 id 直接使用组件的 DOM id模板中通过unique-id-polyfillhelper 生成唯一 id若传了theme则调用container.loadTheme(theme)应用主题若传了particlesLoaded回调则把容器实例回传给调用方通过registerDestructor注册销毁钩子在组件销毁时自动container.destroy()保证内存安全。initParticlesEngine 的单例语义wrappers/ember/addon/utils/init-particles-engine.ts 提供了幂等的引擎初始化工具initParticlesEngine(init?)接收一个可选的注册回调类型为ParticlesPluginRegistrar在回调中调用engine上的各loadXxx函数注册预设/插件随后执行tsParticles.init()模块内部用initialized、initPromise、initCallback三个变量保证整个应用生命周期内只初始化一次若重复传入不同的回调会抛出错误要求回调保持稳定另导出isParticlesEngineInitialized()与waitForParticlesEngineInitialization()两个辅助函数供 modifier 等内部模块同步等待初始化完成。三种配置的实战解读三个配置对象完整位于 app/utils/options.ts这里给出关键参数的含义与取值方便你按需复制改造。LINK_OPTIONS链接粒子参数取值作用particles.paint.color.value#ffffff粒子填充色白色particles.linkscolor: #ffffff,distance: 150,enable: true,opacity: 0.5,width: 1粒子间连接线颜色、最大连线距离150px、开关、透明度、线宽particles.collisions.enabletrue开启粒子碰撞particles.moveenable: true,speed: 2,straight: false,random: false匀速、非直线运动速度 2particles.numbervalue: 80,density: { enable: true, area: 800 }粒子总数 80密度按 800px² 面积自适应particles.shape.typecircle圆形粒子particles.size.value{ min: 1, max: 5 }尺寸在 1~5 之间随机detectRetinatrue开启 Retina 高分屏适配SNOW_OPTIONS雪花效果在链接配置基础上做了三点关键改动fullScreen.zIndex: -1让画布置于页面背景层particles.number.value: 400大幅提高粒子密度move.direction: bottom让粒子只向下飘落并启用wobble摆动参数distance: 10、speed: 10模拟雪花摇曳下落。CONFETTI_OPTIONS彩带效果这是三者中最复杂的一份配置核心在于emitters发射器位置固定在{x: 50, y: 100}即屏幕底部中央以rate: { quantity: 5, delay: 0.15 }的速率每次喷射 5 个粒子粒子颜色数组[#1E00FF, #FF0061, #E1FF00, #00FF9E]提供四色随机move.gravity.enable: true开启重力decay: 0.05让速度逐渐衰减outModes: { top: none, default: destroy }表示粒子飞出屏幕除顶部后销毁rotate、tilt、roll、wobble四项动画参数共同营造彩带翻飞、旋转的立体感size.animation使用startValue: min、count: 1、speed: 16、sync: true让尺寸从最小值同步放大最后通过responsive数组声明在maxWidth: 1024平板及以下时将粒子速度降低到{ min: 33, max: 66 }实现响应式降载。与官方 wrapper 测试的呼应tsparticles/ember封装自带完整的测试套件位于 wrappers/ember/tests包括integration/components/particles-test.ts组件集成测试、helpers/particles.ts测试辅助以及使用 QUnit 的单元测试配合 wrappers/ember/config/ember-try.js 的 ember-try 多版本矩阵。如果你要扩展 demo 或封装新组件可参照这些测试文件验证Particles的行为是否符合预期。小结通过demo/ember这份独立演示应用可以快速掌握在 Ember 中使用 tsParticles 的完整链路pnpm workspace 安装与构建 →ember serve启动 →Particles组件消费options/theme/particlesLoaded→initParticlesEngine按需注册引擎与预设 → modifier 内部完成容器加载、主题切换与销毁。你可以直接复制 options.ts 中的三份配置作为起点在此基础上调整颜色、数量、速度与动画参数打造属于自己的 Ember 粒子背景。【免费下载链接】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.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考