粒子特效与动效

本页列出 theme.config.js 中 effects 配置项控制的全部视觉特效，说明各层的作用、关键参数与性能开关，并给出性能优化建议。所有特效均可在配置层独立开关与调参，无需修改组件代码。

网站有两层 Canvas 粒子动画 + 一层 DOM 星空 + 一组 CSS 微交互。每一层都可以在 theme.config.js → effects 中独立开关与调参，不需要改任何组件代码。

效果总览

各特效层的位置、两种模式下的表现与总开关如下表所示：

层	组件	位置	浅色模式	深色模式	总开关
星空	Starfield	首页首屏背景	星空 + 星云	星空 + 星云	effects.starfield.status
内容区粒子	ContentParticles	首页内容区背景	飘落花瓣（带拖尾）	上升粒子 + 雾气 + 闪电	effects.contentParticles.status
页脚粒子	FooterParticles	页脚背景	不显示	上升发光粒子	effects.footerParticles.status
微交互	纯 CSS	全站	——	——	effects.animations.*.status

颜色统一在 theme.config.js → home 配置（数组形式的备选色），数量、速度、尺寸等在 effects 对应区块配置。两者的对应关系见 主题配置。

星空 starfield

首屏 Hero 的星空背景，使用 DOM 元素与 CSS 动画实现，而非 Canvas。

视觉构成

• 星星：随机大小（starSize），每颗有独立的闪烁周期（twinkle）与缓慢的漂移动画（drift）
• 星云：三团巨大的径向渐变光斑（颜色在 home.hero.nebula1~3），带缓慢的漂移动画

关键参数（完整参数表见 主题配置）

常用参数及其作用如下表所示：

参数	作用
starCount.desktop / mobile	星星数量分档，移动端少 40% 左右
twinkle.durationMin/Max	每颗星星闪烁周期在 1.5~3.5 秒间随机
drift.distanceX/Y	星星漂移的终点位移，负值表示向左上漂
nebula.items	三团星云的位置（top/left）、大小（size）、漂移周期（duration）

调参示例

• 需要更密集的星空：将 starCount.desktop 由 45 调整为 70
• 需要更梦幻的大星云：将 nebula.items 中某项的 size 由 '55vw' 调整为 '75vw'
• 性能受限的设备：将 starCount 降至 25 左右

内容区粒子 contentParticles

首页首屏以下所有板块的背景层。浅色模式与深色模式使用两套不同的视觉方案。

浅色模式：飘落花瓣

• 花瓣从屏幕顶部飘落，带左右摇摆、自转、半透明
• 桌面端有拖尾效果（enableTrail），更接近飘舞的花瓣效果
• 颜色从 home.contentParticles.light 数组中随机取（默认粉色系）
• 参数在 petal：大小 6~10px、下落速度 0.5~1.4 px/帧、摇摆频率等

深色模式：上升粒子 + 雾气 + 闪电

• 上升粒子：紫色小光点从底部升起（darkDot 参数）
• 雾气：几团巨大的半透明色块缓慢漂移（mist 参数；颜色在 home.contentParticles.mist）
• 闪电：递归分形算法生成的枝状闪电，随机劈下后消散
  • 出现频率由 initialTimer（首道）与 recurrenceTimer（后续）控制，单位是帧（60fps 下 240 帧 ≈ 4 秒）
  • 形状由 mainDisplacement / mainDepth（主干曲折度）与 branchCount / branchDepth（分支）控制

性能开关

各性能开关的说明如下表所示：

开关	说明
enableTrail	花瓣拖尾（仅桌面端）。低端设备建议关
enableLightning	闪电（仅桌面端）。最耗性能的一项
maxDprMobile	移动端 Canvas 像素比上限 1.5，防止高分屏 Canvas 过大掉帧
particleCount / mistCount	桌面 / 移动端分档数量

页脚粒子 footerParticles

仅深色模式显示：金 / 粉色小粒子从页脚底部缓缓升起、摆动、淡出，循环往复。

• 颜色：home.footerParticles.colors（默认 ['#ffd700', '#da70d6']）
• 生命周期 lifeMin/Max：粒子「存活」100~200 帧后淡出重生

CSS 微交互

不依赖 Canvas 的纯 CSS 动画（完整参数表见 主题配置）：

动画	效果	可调参数
pageEnter	页面打开时整体淡入上移	时长、距离、缓动
buttonGlow	按钮悬停发光 + 上浮	上浮距离、阴影扩散、模糊半径
cardHover	卡片悬停上浮	上浮距离
iconHover	图标悬停放大 + 旋转	倍数、角度
linkGlow	链接下方紫色光带从左滑入	——
musicVisualizer	播放器律动条	周期、高度范围

开关方式：把对应项的 status 改为 'disable'，ThemeContext 会自动在 <html> 上加 data-disable-* 属性，CSS 跳过该动画。详见 暗色 / 亮色主题。

性能优化建议

按优先级依次调整（均位于 theme.config.js）：

1. contentParticles.enableLightning = false（闪电最耗性能）
2. contentParticles.enableTrail = false（拖尾次之）
3. 调低各 particleCount（桌面端为主）
4. 将不重要的层整体设为 status: 'disable'（如页脚粒子）

提示

所有特效关闭后，页面仍有完整的 CSS 渐变背景（home.hero.background 等），背景视觉依然完整。