https://shanghaidc1.gaoice.run/index.php?action=history&feed=atom&title=%E6%A8%A1%E5%9D%97%3A%E6%8A%96%E5%8A%A8%2Fdoc
模块:抖动/doc - 版本历史
2026-11-01T10:10:25Z
本wiki上该页面的版本历史
MediaWiki 1.46.2
https://shanghaidc1.gaoice.run/index.php?title=%E6%A8%A1%E5%9D%97:%E6%8A%96%E5%8A%A8/doc&diff=56280&oldid=prev
2026年8月31日 (一) 13:13 晨茗biu～
2026-08-31T13:13:28Z
<p></p>
<a href="https://shanghaidc1.gaoice.run/index.php?title=%E6%A8%A1%E5%9D%97:%E6%8A%96%E5%8A%A8/doc&diff=56280&oldid=56262">显示更改</a>
晨茗biu～
https://shanghaidc1.gaoice.run/index.php?title=%E6%A8%A1%E5%9D%97:%E6%8A%96%E5%8A%A8/doc&diff=56262&oldid=prev
晨茗biu～：文字抖动模板
2026-08-31T09:08:59Z
<p>文字抖动模板</p>
<p><b>新页面</b></p><div>[[模板:抖动]]的底层生成器，负责把模板参数转换为最终的 HTML 结构。<br />
<br />
== 工作原理 ==<br />
<br />
模块按以下步骤工作：<br />
<br />
# 读取参数：从调用中取得「内容、模式、逐字、速度、延迟」以及各模式对应的档位参数。<br />
# 解析模式：把 <code>模式=平移+旋转+跳动</code> 这类字符串拆分成模式列表。<br />
# 解析档位：把用户传入的 1–10 数字（或少量中文档位名）规整为合法的档位值，越界时自动钳制。<br />
# 生成结构：为每个模式各包一层 <code>&lt;span&gt;</code> 并依次嵌套；逐字模式下把文字按单个字符拆开。<br />
# 输出 HTML：模块只生成 class 名和必要的内联样式，动画本身由[[模板:抖动/styles.css]]提供。<br />
<br />
== 模式叠加的原理 ==<br />
<br />
CSS 中同一元素只能运行一个 transform 动画，无法直接叠加。因此模块让每种模式各占一层 <code>&lt;span&gt;</code>：<br />
<br />
<pre><br />
<span class="dk-translate-5"> ← 平移层<br />
<span class="dk-rotate-6"> ← 旋转层<br />
<span class="dk-bounce-3"> ← 跳动层<br />
文字<br />
</span><br />
</span><br />
</span><br />
</pre><br />
<br />
各层动画独立运行，视觉上自然叠加：外层负责整体平移，内层负责局部抖动。<br />
<br />
== 逐字与整段 ==<br />
<br />
* '''整段模式'''：内容作为整体被包裹，先经 <code>frame:preprocess()</code> 处理，支持 wikitext 语法。<br />
* '''逐字模式'''：用 <code>mw.ustring.gmatch(text, '.')</code> 将文字按字符拆开，每个字符成为独立抖动单元，并配以递增的负值动画延迟，使各字错位、不同步。逐字模式仅适用于纯文本。<br />
<br />
== 与样式表的关系 ==<br />
<br />
模块不包含任何动画定义，只负责产出：<br />
<br />
* 形如 <code>dk-模式-档位</code> 的 class（如 <code>dk-translate-5</code>）；<br />
* 用户显式设置的速度 / 延迟内联样式（如 <code>style="animation-duration:0.3s"</code>）。<br />
<br />
实际动画（keyframes、位移、旋转角度等）全部定义在[[模板:抖动/styles.css]]，二者通过 class 名对应。</div>
晨茗biu～