tsParticles Curl Noise 路径插件实战用旋度噪声为粒子生成流体般丝滑运动【免费下载链接】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 官方 Curl Noise 路径插件的技术指南。该插件npm 包名tsparticles/path-curl-noise为粒子提供基于旋度噪声curl noise流场的移动路径生成器让粒子沿着无散度的流体流线运动适合营造烟雾、气流、水墨、星云等有机流动的背景效果。读完本文你将掌握该插件的安装方式、加载时序、particles.move.path配置写法以及插件背后基于 SimplexNoise 的旋度采样原理能够直接在 React/Vue/原生 JS 等任意 tsParticles 使用场景中落地。插件是什么curlNoise路径生成器tsParticles 的路径插件机制允许第三方为particles.move.path提供不同的移动路径生成器Path Generator。Curl Noise 插件注册了一个名为curlNoise的生成器其核心作用是在每一帧为粒子计算一个速度向量使粒子沿着由噪声场旋度curl推导出的流线漂移而非沿直线或正弦曲线运动。从源码结构看该插件位于 paths/curlNoise主要包含CurlNoiseGenerator.ts生成器主体实现IMovePathGenerator接口ICurlOptions.ts插件私有选项类型seed、speed、stepindex.ts 与 index.lazy.ts标准加载与懒加载入口均导出loadCurlNoisePathbrowser.tsCDN 版本用于把加载函数挂到全局对象。插件的package.jsonpaths/curlNoise/package.json声明了三个对等依赖peerDependenciestsparticles/engine粒子引擎本体tsparticles/plugin-move提供IMovePathGenerator接口与路径生成器注册表tsparticles/simplex-noise提供 2D SimplexNoise 噪声采样实现。快速开始清单官方 READMEpaths/curlNoise/README.md给出三步快速上手流程安装tsparticles/engine或直接使用下方 CDN 打包文件在调用tsParticles.load(...)之前先调用插件的加载函数loadCurlNoisePath(...)在tsParticles.load(...)的配置对象中启用particles.move.path并指定generator: curlNoise。其中第 2 步是最关键的时序约束加载函数负责把curlNoise名称注册进 move 插件的生成器注册表若顺序颠倒配置中引用的生成器将找不到实现。安装与引入方式CDN / Vanilla JS / jQueryCDN/Vanilla 版本只需引入一个必需文件tsparticles.path.curl.noise.min.js。引入后该文件会向全局暴露一个加载函数loadCurlNoisePath这一点在源码中可直接验证CDN 入口 browser.ts 将loadCurlNoisePath挂载到globalThis因此脚本标签加载完成后即可直接调用。ESM / CommonJS该包同时兼容 ES Module 与 CommonJS先安装$ npm install tsparticles/path-curl-noise或使用 yarn$ yarn add tsparticles/path-curl-noiseCommonJS 用法const { tsParticles } require(tsparticles/engine); const { loadCurlNoisePath } require(tsparticles/path-curl-noise); (async () { await loadCurlNoisePath(tsParticles); })();ESM 用法import { tsParticles } from tsparticles/engine; import { loadCurlNoisePath } from tsparticles/path-curl-noise; (async () { await loadCurlNoisePath(tsParticles); })();需要注意loadCurlNoisePath返回的是 Promise官方示例中均使用await确保注册完成后再tsParticles.load(...)。懒加载lazy入口若希望最大化首屏加载性能可使用tsparticles/path-curl-noise/lazy入口其内部通过动态import()延迟加载生成器实现与依赖见 index.lazy.ts适合与tsparticles/engine/lazy、tsparticles/plugin-move/lazy配合使用。选项映射与完整配置配置键位主配置键particles.move.path路径生成器名称curlNoise最小可用配置如下JSON 形式{ particles: { move: { enable: true, path: { enable: true, generator: curlNoise, options: {} } } } }options对象透传给生成器本身可放入下面三个插件私有参数。插件私有参数options参数类型默认值说明seednumber随机噪声随机种子设置后同一配置可复现完全一致的运动轨迹便于调试与设计一致性speednumber0.2粒子沿 curl 场的移动速度系数最终值会乘以容器retina.pixelRatio以适配高 DPI 屏幕stepnumber250噪声场采样步长即粒子坐标在采样前除以的缩放系数值越小噪声变化越剧烈值越大流线越平滑以上默认值直接来自源码常量CurlNoiseGenerator.ts 中的defaultOptions与init()中的赋值逻辑const defaultOptions: ICurlOptions { speed: 0.2, step: 250, };一个带参数的实际配置示例await tsParticles.load({ id: tsparticles, options: { particles: { move: { enable: true, speed: 2, path: { enable: true, generator: curlNoise, options: { seed: 42, speed: 0.4, step: 300, }, }, }, }, }, });源码原理旋度噪声如何驱动粒子注册机制loadCurlNoisePath(engine)在 index.ts 中实现其核心是把curlNoise名称与一个容器工厂函数注册进 move 插件的管理器export async function loadCurlNoisePath(engine: Engine): Promisevoid { engine.checkVersion(__VERSION__); await engine.pluginManager.register((e: MoveEngine) { ensureBaseMoverLoaded(e); e.pluginManager.addPathGenerator?.(curlNoisePathName, container { return Promise.resolve(new CurlNoiseGenerator(container)); }); }); }其中addPathGenerator的能力定义在 plugins/move/src/Types.ts 的MovePluginManager类型中路径生成器初始化器签名由 IMovePathGenerator.ts 定义export interface IMovePathGenerator { generate: (particle: Particle, delta: IDelta) Vector; init: () void; reset: (particle: Particle) void; update: () void; }调用链从 plugins/move/src/MovePluginInstance.ts 的源码可以还原完整的调用链粒子初始化时若move.path.generator存在则从当前容器的pathGenerators映射中查找同名生成器未命中则从全局availablePathGenerators注册表取用并缓存随后调用pathGenerator.init()读取配置中的seed/speed/step生成器被挂载到particle.pathGenerator每帧粒子更新时move 插件调用pathGenerator.generate(particle, delta)获得速度向量粒子销毁时调用pathGenerator.reset(particle)容器级更新时调用pathGenerator.update()。生成器的核心计算CurlNoiseGenerator.generate()CurlNoiseGenerator.ts是插件的灵魂。它使用 2D SimplexNoise 作为标量场n(x, y)通过有限差分近似计算其旋度const eps 0.001, n1a this.#simplex.noise(x, y eps), n2a this.#simplex.noise(x, y - eps), a (n1a - n2a) / (double * eps), n1b this.#simplex.noise(x eps, y), n2b this.#simplex.noise(x - eps, y), b (n1b - n2b) / (double * eps); particle.velocity.x 0; particle.velocity.y 0; this.#res.x speed * a; this.#res.y speed * -b;其中粒子坐标在采样前先除以step进行缩放x pos.x / step, y pos.y / step,数学上向量场(∂n/∂y, -∂n/∂x)是无散度divergence-free的这意味着粒子不会聚集或稀散形成的是连续、平滑、流体般的流线这正是 curl noise 路径与随机游走或直线运动的最大区别。每次init()时还会对 SimplexNoise 播种this.#simplex.seed(this.options.seed ?? getRandom());因此不指定seed时每次加载都会得到不同的流场形态。常见陷阱官方 README 专门列出了三类高频问题结合源码可以更精确地理解其成因在loadCurlNoisePath(...)之前调用tsParticles.load(...)此时curlNoise尚未注册进生成器注册表配置中的generator: curlNoise会找不到实现表现为粒子不沿路径移动。正确做法是await loadCurlNoisePath(tsParticles)之后再await tsParticles.load(...)。缺少必要的 peer 依赖启用高级选项前请确认tsparticles/engine、tsparticles/plugin-move、tsparticles/simplex-noise均已正确安装npm/yarn 在安装tsparticles/path-curl-noise时通常会自动安装 peer 依赖手动管理依赖时需特别核对。一次改动多个配置项导致难以定位问题speed、step、seed对运动形态影响各不相同速度影响快慢、步长影响流线粗细与剧烈程度、种子影响形态建议一次只调整一个选项组便于快速隔离回归。相关文档所有包目录见仓库根目录 README.md主文档仓库内markdown目录下的 Options.md 与 Container.md 覆盖引擎级选项说明move 路径相关配置可继续查看 plugins/move 的实现其他路径插件可对照 paths 目录下的branches、curves、polygon、simplexNoise等同级子包理解不同路径生成器的实现差异小结Curl Noise 路径插件是 tsParticles 路径插件生态中一个算法精巧、开箱即用的成员三个步骤即可接入安装、先注册后加载、配置particles.move.path三个参数即可调形seed、speed、step而底层则是 SimplexNoise 标量场旋度的有限差分近似天然产生无散度、平滑连贯的流体式运动。理解其注册调用链与默认值来源后你就能自信地在自己的项目中把粒子背景从直线漂移升级为气流涌动。【免费下载链接】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 Curl Noise 路径插件实战：用旋度噪声为粒子生成流体般丝滑运动
tsParticles Curl Noise 路径插件实战用旋度噪声为粒子生成流体般丝滑运动【免费下载链接】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 官方 Curl Noise 路径插件的技术指南。该插件npm 包名tsparticles/path-curl-noise为粒子提供基于旋度噪声curl noise流场的移动路径生成器让粒子沿着无散度的流体流线运动适合营造烟雾、气流、水墨、星云等有机流动的背景效果。读完本文你将掌握该插件的安装方式、加载时序、particles.move.path配置写法以及插件背后基于 SimplexNoise 的旋度采样原理能够直接在 React/Vue/原生 JS 等任意 tsParticles 使用场景中落地。插件是什么curlNoise路径生成器tsParticles 的路径插件机制允许第三方为particles.move.path提供不同的移动路径生成器Path Generator。Curl Noise 插件注册了一个名为curlNoise的生成器其核心作用是在每一帧为粒子计算一个速度向量使粒子沿着由噪声场旋度curl推导出的流线漂移而非沿直线或正弦曲线运动。从源码结构看该插件位于 paths/curlNoise主要包含CurlNoiseGenerator.ts生成器主体实现IMovePathGenerator接口ICurlOptions.ts插件私有选项类型seed、speed、stepindex.ts 与 index.lazy.ts标准加载与懒加载入口均导出loadCurlNoisePathbrowser.tsCDN 版本用于把加载函数挂到全局对象。插件的package.jsonpaths/curlNoise/package.json声明了三个对等依赖peerDependenciestsparticles/engine粒子引擎本体tsparticles/plugin-move提供IMovePathGenerator接口与路径生成器注册表tsparticles/simplex-noise提供 2D SimplexNoise 噪声采样实现。快速开始清单官方 READMEpaths/curlNoise/README.md给出三步快速上手流程安装tsparticles/engine或直接使用下方 CDN 打包文件在调用tsParticles.load(...)之前先调用插件的加载函数loadCurlNoisePath(...)在tsParticles.load(...)的配置对象中启用particles.move.path并指定generator: curlNoise。其中第 2 步是最关键的时序约束加载函数负责把curlNoise名称注册进 move 插件的生成器注册表若顺序颠倒配置中引用的生成器将找不到实现。安装与引入方式CDN / Vanilla JS / jQueryCDN/Vanilla 版本只需引入一个必需文件tsparticles.path.curl.noise.min.js。引入后该文件会向全局暴露一个加载函数loadCurlNoisePath这一点在源码中可直接验证CDN 入口 browser.ts 将loadCurlNoisePath挂载到globalThis因此脚本标签加载完成后即可直接调用。ESM / CommonJS该包同时兼容 ES Module 与 CommonJS先安装$ npm install tsparticles/path-curl-noise或使用 yarn$ yarn add tsparticles/path-curl-noiseCommonJS 用法const { tsParticles } require(tsparticles/engine); const { loadCurlNoisePath } require(tsparticles/path-curl-noise); (async () { await loadCurlNoisePath(tsParticles); })();ESM 用法import { tsParticles } from tsparticles/engine; import { loadCurlNoisePath } from tsparticles/path-curl-noise; (async () { await loadCurlNoisePath(tsParticles); })();需要注意loadCurlNoisePath返回的是 Promise官方示例中均使用await确保注册完成后再tsParticles.load(...)。懒加载lazy入口若希望最大化首屏加载性能可使用tsparticles/path-curl-noise/lazy入口其内部通过动态import()延迟加载生成器实现与依赖见 index.lazy.ts适合与tsparticles/engine/lazy、tsparticles/plugin-move/lazy配合使用。选项映射与完整配置配置键位主配置键particles.move.path路径生成器名称curlNoise最小可用配置如下JSON 形式{ particles: { move: { enable: true, path: { enable: true, generator: curlNoise, options: {} } } } }options对象透传给生成器本身可放入下面三个插件私有参数。插件私有参数options参数类型默认值说明seednumber随机噪声随机种子设置后同一配置可复现完全一致的运动轨迹便于调试与设计一致性speednumber0.2粒子沿 curl 场的移动速度系数最终值会乘以容器retina.pixelRatio以适配高 DPI 屏幕stepnumber250噪声场采样步长即粒子坐标在采样前除以的缩放系数值越小噪声变化越剧烈值越大流线越平滑以上默认值直接来自源码常量CurlNoiseGenerator.ts 中的defaultOptions与init()中的赋值逻辑const defaultOptions: ICurlOptions { speed: 0.2, step: 250, };一个带参数的实际配置示例await tsParticles.load({ id: tsparticles, options: { particles: { move: { enable: true, speed: 2, path: { enable: true, generator: curlNoise, options: { seed: 42, speed: 0.4, step: 300, }, }, }, }, }, });源码原理旋度噪声如何驱动粒子注册机制loadCurlNoisePath(engine)在 index.ts 中实现其核心是把curlNoise名称与一个容器工厂函数注册进 move 插件的管理器export async function loadCurlNoisePath(engine: Engine): Promisevoid { engine.checkVersion(__VERSION__); await engine.pluginManager.register((e: MoveEngine) { ensureBaseMoverLoaded(e); e.pluginManager.addPathGenerator?.(curlNoisePathName, container { return Promise.resolve(new CurlNoiseGenerator(container)); }); }); }其中addPathGenerator的能力定义在 plugins/move/src/Types.ts 的MovePluginManager类型中路径生成器初始化器签名由 IMovePathGenerator.ts 定义export interface IMovePathGenerator { generate: (particle: Particle, delta: IDelta) Vector; init: () void; reset: (particle: Particle) void; update: () void; }调用链从 plugins/move/src/MovePluginInstance.ts 的源码可以还原完整的调用链粒子初始化时若move.path.generator存在则从当前容器的pathGenerators映射中查找同名生成器未命中则从全局availablePathGenerators注册表取用并缓存随后调用pathGenerator.init()读取配置中的seed/speed/step生成器被挂载到particle.pathGenerator每帧粒子更新时move 插件调用pathGenerator.generate(particle, delta)获得速度向量粒子销毁时调用pathGenerator.reset(particle)容器级更新时调用pathGenerator.update()。生成器的核心计算CurlNoiseGenerator.generate()CurlNoiseGenerator.ts是插件的灵魂。它使用 2D SimplexNoise 作为标量场n(x, y)通过有限差分近似计算其旋度const eps 0.001, n1a this.#simplex.noise(x, y eps), n2a this.#simplex.noise(x, y - eps), a (n1a - n2a) / (double * eps), n1b this.#simplex.noise(x eps, y), n2b this.#simplex.noise(x - eps, y), b (n1b - n2b) / (double * eps); particle.velocity.x 0; particle.velocity.y 0; this.#res.x speed * a; this.#res.y speed * -b;其中粒子坐标在采样前先除以step进行缩放x pos.x / step, y pos.y / step,数学上向量场(∂n/∂y, -∂n/∂x)是无散度divergence-free的这意味着粒子不会聚集或稀散形成的是连续、平滑、流体般的流线这正是 curl noise 路径与随机游走或直线运动的最大区别。每次init()时还会对 SimplexNoise 播种this.#simplex.seed(this.options.seed ?? getRandom());因此不指定seed时每次加载都会得到不同的流场形态。常见陷阱官方 README 专门列出了三类高频问题结合源码可以更精确地理解其成因在loadCurlNoisePath(...)之前调用tsParticles.load(...)此时curlNoise尚未注册进生成器注册表配置中的generator: curlNoise会找不到实现表现为粒子不沿路径移动。正确做法是await loadCurlNoisePath(tsParticles)之后再await tsParticles.load(...)。缺少必要的 peer 依赖启用高级选项前请确认tsparticles/engine、tsparticles/plugin-move、tsparticles/simplex-noise均已正确安装npm/yarn 在安装tsparticles/path-curl-noise时通常会自动安装 peer 依赖手动管理依赖时需特别核对。一次改动多个配置项导致难以定位问题speed、step、seed对运动形态影响各不相同速度影响快慢、步长影响流线粗细与剧烈程度、种子影响形态建议一次只调整一个选项组便于快速隔离回归。相关文档所有包目录见仓库根目录 README.md主文档仓库内markdown目录下的 Options.md 与 Container.md 覆盖引擎级选项说明move 路径相关配置可继续查看 plugins/move 的实现其他路径插件可对照 paths 目录下的branches、curves、polygon、simplexNoise等同级子包理解不同路径生成器的实现差异小结Curl Noise 路径插件是 tsParticles 路径插件生态中一个算法精巧、开箱即用的成员三个步骤即可接入安装、先注册后加载、配置particles.move.path三个参数即可调形seed、speed、step而底层则是 SimplexNoise 标量场旋度的有限差分近似天然产生无散度、平滑连贯的流体式运动。理解其注册调用链与默认值来源后你就能自信地在自己的项目中把粒子背景从直线漂移升级为气流涌动。【免费下载链接】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），仅供参考