模块:抖动/doc

模板:抖动的底层生成器，负责把模板参数转换为最终的 HTML 结构。

工作原理

模块按以下步骤工作：

1. 读取参数：从调用中取得「内容、模式、逐字、速度、延迟」以及各模式对应的档位参数。
2. 解析模式：把 模式=平移+旋转+跳动 这类字符串拆分成模式列表。
3. 解析档位：把用户传入的 1–10 数字（或少量中文档位名）规整为合法的档位值，越界时自动钳制。
4. 生成结构：为每个模式各包一层 <span> 并依次嵌套；逐字模式下把文字按单个字符拆开。
5. 输出 HTML：模块只生成 class 名和必要的内联样式，动画本身由模板:抖动/styles.css提供。

模式叠加的原理

CSS 中同一元素只能运行一个 transform 动画，无法直接叠加。因此模块让每种模式各占一层 <span>：

<span class="dk-translate-5">          ← 平移层
  <span class="dk-rotate-6">      ← 旋转层
    <span class="dk-bounce-3">    ← 跳动层
      文字
    </span>
  </span>
</span>

各层动画独立运行，视觉上自然叠加：外层负责整体平移，内层负责局部抖动。

逐字与整段

• 整段模式：内容作为整体被包裹，先经 frame:preprocess() 处理，支持 wikitext 语法。
• 逐字模式：用 mw.ustring.gmatch(text, '.') 将文字按字符拆开，每个字符成为独立抖动单元，并配以递增的负值动画延迟，使各字错位、不同步。逐字模式仅适用于纯文本。

与样式表的关系

模块不包含任何动画定义，只负责产出：

• 形如 dk-模式-档位 的 class（如 dk-translate-5）；
• 用户显式设置的速度 / 延迟内联样式（如 style="animation-duration:0.3s"）。

实际动画（keyframes、位移、旋转角度等）全部定义在模板:抖动/styles.css，二者通过 class 名对应。