tsParticles Squares 预设Preset完整实战指南安装、配置与源码解析【免费下载链接】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本篇指南以 tsParticles 官方 squares 预设tsparticles/preset-squares为核心系统讲解如何用它快速构建彩色方形粒子旋转坠落的动画背景效果。读完你将掌握预设的安装与快速接入、loadSquaresPreset的正确调用时机、默认配置项颜色、尺寸、旋转、发射器的逐项含义、如何覆盖默认参数实现完全自定义以及该预设底层依赖的插件/形状/更新器组合原理。什么是 Squares 预设tsparticles/preset-squares是 tsParticles 官方提供的一组开箱即用的粒子效果预设它用方形粒子 旋转动画 尺寸增长 发射器的组合生成由彩色方块组成的动态几何图案见上图。与其说它是静态贴图不如说它是一整套配方你只需一行preset: squares引擎就会自动完成所有相关模块的加载与参数配置无需逐个手动引入依赖。从源码结构看该预设的完整实现位于 presets/squares/包含src/index.ts主入口、src/options.ts默认配置、src/index.lazy.ts按需加载入口以及bundle.ts/browser.ts浏览器全局变量绑定当前版本为4.3.3见 presets/squares/package.json。快速接入三步走官方 README 给出了最简使用清单见 presets/squares/README.md按顺序执行即可安装tsparticles/engine或直接使用下方 CDN 全量包在tsParticles.load(...)之前先调用loadSquaresPreset(tsParticles)注册预设在 options 中设置preset: squares。其中第 2 步的顺序至关重要预设必须在实例加载前完成注册否则引擎在解析preset: squares时找不到对应预设会抛出错误。安装方式方式一npm / pnpm推荐npm install tsparticles/engine tsparticles/preset-squares # 或 pnpm add tsparticles/engine tsparticles/preset-squares从 presets/squares/package.json 可以看到该包同时提供 ESMdist/esm、CJSdist/cjs、UMDdist/umd和浏览器dist/browser多种产物并通过exports字段按环境分发可直接兼容现代打包器与 Node 环境。方式二CDN / Vanilla JS / jQueryscript srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-squares4/tsparticles.preset.squares.bundle.min.js/script该 bundle 文件由 presets/squares/src/bundle.ts 构建除了loadSquaresPreset之外还会把tsParticles引擎实例一并挂载到globalThiswindow上因此脚本加载完成后即可直接使用全局的tsParticles和loadSquaresPreset。基本使用让方形粒子动起来加载脚本或完成 import后按如下方式启动(async () { await loadSquaresPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: squares, }, }); })();要点说明loadSquaresPreset(tsParticles)返回 Promise务必await确保全部子模块注册完成后再loadid: tsparticles对应页面上承载画布的 DOM 元素 id默认取该 id 的元素作为容器选项对象中只需声明preset: squares其余细节由预设默认配置补齐。默认配置逐项拆解预设的默认配置定义在 presets/squares/src/options.ts把它读懂就理解了整个效果的工作原理export const options: ISourceOptions { particles: { paint: { stroke: { width: 5, color: { value: [#5bc0eb, #fde74c, #9bc53d, #e55934, #fa7921, #2FF3E0, #F8D210, #FA26A0, #F51720], }, }, fill: { enable: false }, }, shape: { type: square }, rotate: { value: 0, direction: RotateDirection.counterClockwise, animation: { enable: true, speed: 2, sync: true }, }, size: { value: { min: 1, max: 500 }, animation: { enable: true, startValue: StartValueType.min, speed: 60, sync: true, destroy: DestroyType.max, }, }, }, background: { color: #000 }, emitters: { position: { y: 50, x: 50 }, rate: { delay: 1, quantity: 1 }, }, };paint描边画笔这是 Squares 预设最核心的视觉来源。paint.stroke.width: 5定义每个方块的描边粗细为 5pxcolor.value是一个包含 9 种高饱和度霓虹色的数组蓝#5bc0eb、黄#fde74c、绿#9bc53d、橙红#e55934、橙#fa7921、青#2FF3E0、明黄#F8D210、品红#FA26A0、红#F51720粒子会从数组中随机取色fill.enable: false表示不填充方块内部只保留彩色描边轮廓——这正是效果图中空心几何线框的来源。该特性由 updaters/paint/ 的loadPaintUpdater提供。shape形状shape.type: square明确粒子为正方形对应 shapes/square/ 包中的loadSquareShape。rotate旋转value: 0初始旋转角度为 0direction: counterClockwise逆时针旋转animation.enable: true、speed: 2、sync: true所有粒子以相同速度每帧 2 度同步逆时针旋转形成整齐划一的整体转动感。size尺寸value: { min: 1, max: 500 }粒子尺寸在 1500 之间随机取值跨度极大制造大小对比animation.startValue: StartValueType.min尺寸动画从最小值开始speed: 60增长速度快sync: true全部粒子同步destroy: DestroyType.max粒子尺寸达到上限max后即被销毁——配合发射器不断补新粒子形成生长-消亡循环。background 与 emittersbackground.color: #000默认黑色背景注意README 常见陷阱部分提醒该预设默认是透明背景这里源码已显式设置黑色如需其他底色请自行覆盖emitters.position发射器位于画布中心x50%, y50%emitters.rate每delay: 1秒发射quantity: 1个粒子。发射功能由 plugins/emitters/ 的loadEmittersPluginSimple提供。关于 hex 颜色配置中大量使用#RRGGBB十六进制颜色其解析能力来自 plugins/colors/hex/ 包的loadHexColorPlugin。这意味着即使你只使用引擎精简版只要注册了该预设hex 颜色字符串就能被正确解析。源码级解析loadSquaresPreset 做了什么主入口 presets/squares/src/index.ts 的实现非常直观export async function loadSquaresPreset(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { await Promise.all([ loadHexColorPlugin(e), loadEmittersPluginSimple(e), loadSquareShape(e), loadRotateUpdater(e), loadSizeUpdater(e), loadPaintUpdater(e), ]); e.pluginManager.addPreset(presetName, options); }); }它一次性并发注册了 6 个模块最后通过e.pluginManager.addPreset(squares, options)把默认配置绑定到squares这个预设名上。这解释了为什么安装清单里只写engine 预设包就够loadSquaresPreset内部已自动完成所有附属模块的加载。按需加载入口Lazy对于注重首屏体积的项目可使用懒加载入口 presets/squares/src/index.lazy.ts它把全部依赖改为动态import()仅在调用loadSquaresPreset时才真正加载对应代码块对应包的exports中的./lazy路径。使用方式import { loadSquaresPreset } from tsparticles/preset-squares/lazy;自定义覆盖任意默认参数README 特别强调见 presets/squares/README.md 的 Customization 章节预设只是默认值你可以像普通 tsParticles 安装一样覆盖任意属性且优先级为你传入的配置 预设默认配置tsParticles.load({ id: tsparticles, options: { particles: { shape: { type: circle, // 从 v2 起使用 circle 需单独加载 circle shape 脚本 }, }, preset: squares, }, });如上例仅覆盖particles.shape.type为circle其余paint 描边、旋转、尺寸动画、发射器全部沿用预设默认值最终得到的是彩色描边圆环效果——文档原文如此描述the circles will be replaced by squares即默认方块会被覆盖成圆形。再如把描边换成你自己的配色并调整粗细await tsParticles.load({ id: tsparticles, options: { preset: squares, particles: { paint: { stroke: { width: 8, color: { value: [#ff0000, #00ff00] }, }, }, }, }, });在框架组件中使用若你使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 的 tsParticles 组件库仓库中对应目录见 wrappers/例如 wrappers/react、wrappers/vue3调用方式同样简单用loadSquaresPreset取代组件默认的loadFull/loadSlim注册函数options 结构完全一致均可直接复用上面所有配置示例。依赖包一览该预设由以下包组合而成信息来自 presets/squares/package.json 与 README 依赖表包名在预设中的作用仓库对应路径tsparticles/enginetsParticles 核心引擎与预设注册机制engine/tsparticles/plugin-emitters从可配置发射器生成粒子plugins/emitters/tsparticles/plugin-hex-color支持 hex 颜色解析plugins/colors/hex/tsparticles/shape-square方形粒子形状shapes/square/tsparticles/updater-paint动画化描边/填充颜色属性updaters/paint/tsparticles/updater-rotate粒子旋转动画updaters/rotate/tsparticles/updater-size粒子尺寸随时间变化updaters/size/如果你只想微调某一块行为比如换个旋转方向、改尺寸增速直接阅读对应子包的 README 与源码即可无需研究整个引擎。常见陷阱根据官方 README见 presets/squares/README.md 的 Common pitfalls 章节整理调用顺序错误在loadSquaresPreset(tsParticles)之前就执行tsParticles.load(...)预设未注册导致加载失败漏加载 shape 包使用 engine-only 精简构建时方形形状不在引擎内必须确保loadSquareShape已被加载使用本预设的 bundle 包则无需担心背景色预期不符预设默认使用透明背景若页面底色不理想请显式设置background.color预设默认配置中已是黑色覆盖即可换色。预设的架构关系README 末尾用 mermaid 图说明了 Squares 预设与引擎、插件、形状、更新器的组装关系各模块均指向预设本身这张图清晰表明Squares 预设是引擎之上按需组装的一层配方底层能力全部来自独立的可复用模块——这也是 tsParticles 生态按需引入、避免全量体积设计哲学的典型体现。延伸阅读全部预设目录仓库内各预设位于 presets/可对比 presets/confetti、presets/fireworks 等颜色格式说明markdown/Color.md选项/配置总览markdown/Options.md颜色插件体系plugins/colors/。至此你可以基于preset: squares在几分钟内得到一套彩色方形粒子动画并按需覆盖颜色、尺寸、旋转与发射频率将其打造成与页面风格一致的动态背景。【免费下载链接】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），仅供参考
tsParticles Squares 预设Preset完整实战指南安装、配置与源码解析【免费下载链接】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本篇指南以 tsParticles 官方 squares 预设tsparticles/preset-squares为核心系统讲解如何用它快速构建彩色方形粒子旋转坠落的动画背景效果。读完你将掌握预设的安装与快速接入、loadSquaresPreset的正确调用时机、默认配置项颜色、尺寸、旋转、发射器的逐项含义、如何覆盖默认参数实现完全自定义以及该预设底层依赖的插件/形状/更新器组合原理。什么是 Squares 预设tsparticles/preset-squares是 tsParticles 官方提供的一组开箱即用的粒子效果预设它用方形粒子 旋转动画 尺寸增长 发射器的组合生成由彩色方块组成的动态几何图案见上图。与其说它是静态贴图不如说它是一整套配方你只需一行preset: squares引擎就会自动完成所有相关模块的加载与参数配置无需逐个手动引入依赖。从源码结构看该预设的完整实现位于 presets/squares/包含src/index.ts主入口、src/options.ts默认配置、src/index.lazy.ts按需加载入口以及bundle.ts/browser.ts浏览器全局变量绑定当前版本为4.3.3见 presets/squares/package.json。快速接入三步走官方 README 给出了最简使用清单见 presets/squares/README.md按顺序执行即可安装tsparticles/engine或直接使用下方 CDN 全量包在tsParticles.load(...)之前先调用loadSquaresPreset(tsParticles)注册预设在 options 中设置preset: squares。其中第 2 步的顺序至关重要预设必须在实例加载前完成注册否则引擎在解析preset: squares时找不到对应预设会抛出错误。安装方式方式一npm / pnpm推荐npm install tsparticles/engine tsparticles/preset-squares # 或 pnpm add tsparticles/engine tsparticles/preset-squares从 presets/squares/package.json 可以看到该包同时提供 ESMdist/esm、CJSdist/cjs、UMDdist/umd和浏览器dist/browser多种产物并通过exports字段按环境分发可直接兼容现代打包器与 Node 环境。方式二CDN / Vanilla JS / jQueryscript srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-squares4/tsparticles.preset.squares.bundle.min.js/script该 bundle 文件由 presets/squares/src/bundle.ts 构建除了loadSquaresPreset之外还会把tsParticles引擎实例一并挂载到globalThiswindow上因此脚本加载完成后即可直接使用全局的tsParticles和loadSquaresPreset。基本使用让方形粒子动起来加载脚本或完成 import后按如下方式启动(async () { await loadSquaresPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: squares, }, }); })();要点说明loadSquaresPreset(tsParticles)返回 Promise务必await确保全部子模块注册完成后再loadid: tsparticles对应页面上承载画布的 DOM 元素 id默认取该 id 的元素作为容器选项对象中只需声明preset: squares其余细节由预设默认配置补齐。默认配置逐项拆解预设的默认配置定义在 presets/squares/src/options.ts把它读懂就理解了整个效果的工作原理export const options: ISourceOptions { particles: { paint: { stroke: { width: 5, color: { value: [#5bc0eb, #fde74c, #9bc53d, #e55934, #fa7921, #2FF3E0, #F8D210, #FA26A0, #F51720], }, }, fill: { enable: false }, }, shape: { type: square }, rotate: { value: 0, direction: RotateDirection.counterClockwise, animation: { enable: true, speed: 2, sync: true }, }, size: { value: { min: 1, max: 500 }, animation: { enable: true, startValue: StartValueType.min, speed: 60, sync: true, destroy: DestroyType.max, }, }, }, background: { color: #000 }, emitters: { position: { y: 50, x: 50 }, rate: { delay: 1, quantity: 1 }, }, };paint描边画笔这是 Squares 预设最核心的视觉来源。paint.stroke.width: 5定义每个方块的描边粗细为 5pxcolor.value是一个包含 9 种高饱和度霓虹色的数组蓝#5bc0eb、黄#fde74c、绿#9bc53d、橙红#e55934、橙#fa7921、青#2FF3E0、明黄#F8D210、品红#FA26A0、红#F51720粒子会从数组中随机取色fill.enable: false表示不填充方块内部只保留彩色描边轮廓——这正是效果图中空心几何线框的来源。该特性由 updaters/paint/ 的loadPaintUpdater提供。shape形状shape.type: square明确粒子为正方形对应 shapes/square/ 包中的loadSquareShape。rotate旋转value: 0初始旋转角度为 0direction: counterClockwise逆时针旋转animation.enable: true、speed: 2、sync: true所有粒子以相同速度每帧 2 度同步逆时针旋转形成整齐划一的整体转动感。size尺寸value: { min: 1, max: 500 }粒子尺寸在 1500 之间随机取值跨度极大制造大小对比animation.startValue: StartValueType.min尺寸动画从最小值开始speed: 60增长速度快sync: true全部粒子同步destroy: DestroyType.max粒子尺寸达到上限max后即被销毁——配合发射器不断补新粒子形成生长-消亡循环。background 与 emittersbackground.color: #000默认黑色背景注意README 常见陷阱部分提醒该预设默认是透明背景这里源码已显式设置黑色如需其他底色请自行覆盖emitters.position发射器位于画布中心x50%, y50%emitters.rate每delay: 1秒发射quantity: 1个粒子。发射功能由 plugins/emitters/ 的loadEmittersPluginSimple提供。关于 hex 颜色配置中大量使用#RRGGBB十六进制颜色其解析能力来自 plugins/colors/hex/ 包的loadHexColorPlugin。这意味着即使你只使用引擎精简版只要注册了该预设hex 颜色字符串就能被正确解析。源码级解析loadSquaresPreset 做了什么主入口 presets/squares/src/index.ts 的实现非常直观export async function loadSquaresPreset(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { await Promise.all([ loadHexColorPlugin(e), loadEmittersPluginSimple(e), loadSquareShape(e), loadRotateUpdater(e), loadSizeUpdater(e), loadPaintUpdater(e), ]); e.pluginManager.addPreset(presetName, options); }); }它一次性并发注册了 6 个模块最后通过e.pluginManager.addPreset(squares, options)把默认配置绑定到squares这个预设名上。这解释了为什么安装清单里只写engine 预设包就够loadSquaresPreset内部已自动完成所有附属模块的加载。按需加载入口Lazy对于注重首屏体积的项目可使用懒加载入口 presets/squares/src/index.lazy.ts它把全部依赖改为动态import()仅在调用loadSquaresPreset时才真正加载对应代码块对应包的exports中的./lazy路径。使用方式import { loadSquaresPreset } from tsparticles/preset-squares/lazy;自定义覆盖任意默认参数README 特别强调见 presets/squares/README.md 的 Customization 章节预设只是默认值你可以像普通 tsParticles 安装一样覆盖任意属性且优先级为你传入的配置 预设默认配置tsParticles.load({ id: tsparticles, options: { particles: { shape: { type: circle, // 从 v2 起使用 circle 需单独加载 circle shape 脚本 }, }, preset: squares, }, });如上例仅覆盖particles.shape.type为circle其余paint 描边、旋转、尺寸动画、发射器全部沿用预设默认值最终得到的是彩色描边圆环效果——文档原文如此描述the circles will be replaced by squares即默认方块会被覆盖成圆形。再如把描边换成你自己的配色并调整粗细await tsParticles.load({ id: tsparticles, options: { preset: squares, particles: { paint: { stroke: { width: 8, color: { value: [#ff0000, #00ff00] }, }, }, }, }, });在框架组件中使用若你使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 的 tsParticles 组件库仓库中对应目录见 wrappers/例如 wrappers/react、wrappers/vue3调用方式同样简单用loadSquaresPreset取代组件默认的loadFull/loadSlim注册函数options 结构完全一致均可直接复用上面所有配置示例。依赖包一览该预设由以下包组合而成信息来自 presets/squares/package.json 与 README 依赖表包名在预设中的作用仓库对应路径tsparticles/enginetsParticles 核心引擎与预设注册机制engine/tsparticles/plugin-emitters从可配置发射器生成粒子plugins/emitters/tsparticles/plugin-hex-color支持 hex 颜色解析plugins/colors/hex/tsparticles/shape-square方形粒子形状shapes/square/tsparticles/updater-paint动画化描边/填充颜色属性updaters/paint/tsparticles/updater-rotate粒子旋转动画updaters/rotate/tsparticles/updater-size粒子尺寸随时间变化updaters/size/如果你只想微调某一块行为比如换个旋转方向、改尺寸增速直接阅读对应子包的 README 与源码即可无需研究整个引擎。常见陷阱根据官方 README见 presets/squares/README.md 的 Common pitfalls 章节整理调用顺序错误在loadSquaresPreset(tsParticles)之前就执行tsParticles.load(...)预设未注册导致加载失败漏加载 shape 包使用 engine-only 精简构建时方形形状不在引擎内必须确保loadSquareShape已被加载使用本预设的 bundle 包则无需担心背景色预期不符预设默认使用透明背景若页面底色不理想请显式设置background.color预设默认配置中已是黑色覆盖即可换色。预设的架构关系README 末尾用 mermaid 图说明了 Squares 预设与引擎、插件、形状、更新器的组装关系各模块均指向预设本身这张图清晰表明Squares 预设是引擎之上按需组装的一层配方底层能力全部来自独立的可复用模块——这也是 tsParticles 生态按需引入、避免全量体积设计哲学的典型体现。延伸阅读全部预设目录仓库内各预设位于 presets/可对比 presets/confetti、presets/fireworks 等颜色格式说明markdown/Color.md选项/配置总览markdown/Options.md颜色插件体系plugins/colors/。至此你可以基于preset: squares在几分钟内得到一套彩色方形粒子动画并按需覆盖颜色、尺寸、旋转与发射频率将其打造成与页面风格一致的动态背景。【免费下载链接】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），仅供参考
