查看“︁模块:抖动/doc”︁的源代码

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

== 工作原理 ==

模块按以下步骤工作：

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

== 模式叠加的原理 ==

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

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

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

== 逐字与整段 ==

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

== 与样式表的关系 ==

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

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

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