这是测试站点!!!!
不要保存重要内容!不要保存重要内容!不要保存重要内容!不要保存重要内容!不要保存重要内容!
模块:抖动/doc:修订间差异
来自Limbo Wiki
< 模块:抖动
文字抖动模板 |
小无编辑摘要 |
||
| 第5行: | 第5行: | ||
模块按以下步骤工作: | 模块按以下步骤工作: | ||
# | # 读取参数:从调用中取得「内容、模式、逐字、速度、延迟」以及各模式对应的数值幅度参数。 | ||
# 解析模式:把 <code>模式=平移+旋转+跳动</code> 这类字符串拆分成模式列表。 | # 解析模式:把 <code>模式=平移+旋转+跳动</code> 这类字符串拆分成模式列表。 | ||
# | # 解析数值:把用户传入的纯数字幅度值规整为合法数值,空值或非数字时回退为程序内置默认值。 | ||
# 生成变量:把各模式的幅度数值转换为行内 CSS 自定义属性(CSS 变量),如 <code>--dk-amp:0.05em</code>。 | |||
# 生成结构:为每个模式各包一层 <code><span></code> 并依次嵌套;逐字模式下把文字按单个字符拆开。 | # 生成结构:为每个模式各包一层 <code><span></code> 并依次嵌套;逐字模式下把文字按单个字符拆开。 | ||
# 输出 HTML:模块只生成 class | # 输出 HTML:模块只生成 class 名、行内 CSS 变量和必要的内联样式,动画本身由[[模板:抖动/styles.css]]提供。 | ||
== 模式叠加的原理 == | == 模式叠加的原理 == | ||
| 第16行: | 第17行: | ||
<pre> | <pre> | ||
<span class="dk-translate" style="--dk-amp:0.11em"> ← 平移层 | |||
<span class="dk-rotate" style="--dk-angle:9deg"> ← 旋转层 | |||
<span class="dk-bounce" style="--dk-amp:-0.17em"> ← 跳动层 | |||
文字 | 文字 | ||
</span> | |||
</span> | |||
</span> | |||
</pre> | </pre> | ||
| 第36行: | 第37行: | ||
模块不包含任何动画定义,只负责产出: | 模块不包含任何动画定义,只负责产出: | ||
* 形如 <code>dk-模式 | * 形如 <code>dk-模式</code> 的 class(如 <code>dk-translate</code>); | ||
* 各模式幅度对应的行内 CSS 自定义属性(如 <code>style="--dk-amp:0.05em"</code>); | |||
* 用户显式设置的速度 / 延迟内联样式(如 <code>style="animation-duration:0.3s"</code>)。 | * 用户显式设置的速度 / 延迟内联样式(如 <code>style="animation-duration:0.3s"</code>)。 | ||
实际动画(keyframes、位移、旋转角度等)全部定义在[[模板:抖动/styles.css]],二者通过 class | 实际动画(keyframes、位移、旋转角度等)全部定义在[[模板:抖动/styles.css]],二者通过 class 名和 CSS 变量对应。模块输出的 class 与 CSS 变量对应关系: | ||
{| class="wikitable" | |||
! 模式 !! 类名 !! 行内 CSS 变量 | |||
|- | |||
| 平移 || <code>dk-translate</code> || <code>--dk-amp: <幅度>em</code> | |||
|- | |||
| 旋转 || <code>dk-rotate</code> || <code>--dk-angle: <角度>deg</code> | |||
|- | |||
| 跳动 || <code>dk-bounce</code> || <code>--dk-amp: -<高度>em</code> | |||
|- | |||
| 摇摆 || <code>dk-swing</code> || <code>--dk-angle: <角度>deg</code> | |||
|- | |||
| 颤抖 || <code>dk-jitter</code> || <code>--dk-amp: <幅度>em; --dk-angle: <角度>deg</code> | |||
|- | |||
| 缩放 || <code>dk-pulse</code> || <code>--dk-scale: <倍数></code> | |||
|} | |||
== 参数与默认值 == | |||
以下为模块读取的全部参数及其'''程序内置默认值'''。模式专属参数只在对应模式被启用时生效。 | |||
{| class="wikitable" | |||
! 参数 !! 作用模式 !! 默认值 !! 单位 !! 说明 | |||
|- | |||
| <code>内容</code> || 全局 || 空(必填) || — || 要抖动的文字;也可作为第 1 个匿名参数 | |||
|- | |||
| <code>模式</code> || 全局 || 颤抖 || — || 抖动模式:<code>平移/旋转/跳动/摇摆/颤抖/缩放</code>,用 <code>+</code> 叠加 | |||
|- | |||
| <code>逐字</code> || 全局 || 否 || — || 设为 <code>是</code> 时逐字独立抖动 | |||
|- | |||
| <code>速度</code> || 全局 || 各模式自带周期<br>(平移 0.5s / 旋转 0.6s / 跳动 0.7s / 摇摆 0.8s / 颤抖 0.18s / 缩放 0.8s) || 秒 || 全局动画周期,越小越快;被模式专属速度覆盖 | |||
|- | |||
| <code>延迟</code> || 全局 || 0 || 秒 || 全局动画延迟;被模式专属延迟覆盖 | |||
|- | |||
| <code>平移幅度</code> || 平移 || 0.11 || em || 水平位移幅度 | |||
|- | |||
| <code>平移速度</code> || 平移 || 继承全局 <code>速度</code>;否则 0.5 || 秒 || 平移层动画周期 | |||
|- | |||
| <code>平移延迟</code> || 平移 || 继承全局 <code>延迟</code>;否则 0 || 秒 || 平移层延迟 | |||
|- | |||
| <code>旋转角度</code> || 旋转 || 9 || deg || 旋转角度 | |||
|- | |||
| <code>旋转速度</code> || 旋转 || 继承全局 <code>速度</code>;否则 0.6 || 秒 || 旋转层动画周期 | |||
|- | |||
| <code>旋转延迟</code> || 旋转 || 继承全局 <code>延迟</code>;否则 0 || 秒 || 旋转层延迟 | |||
|- | |||
| <code>跳动高度</code> || 跳动 || 0.17 || em || 向上跳动高度 | |||
|- | |||
| <code>跳动速度</code> || 跳动 || 继承全局 <code>速度</code>;否则 0.7 || 秒 || 跳动层动画周期 | |||
|- | |||
| <code>跳动延迟</code> || 跳动 || 继承全局 <code>延迟</code>;否则 0 || 秒 || 跳动层延迟 | |||
|- | |||
| <code>摇摆角度</code> || 摇摆 || 9 || deg || 摇摆角度 | |||
|- | |||
| <code>摇摆速度</code> || 摇摆 || 继承全局 <code>速度</code>;否则 0.8 || 秒 || 摇摆层动画周期 | |||
|- | |||
| <code>摇摆延迟</code> || 摇摆 || 继承全局 <code>延迟</code>;否则 0 || 秒 || 摇摆层延迟 | |||
|- | |||
| <code>颤抖幅度</code> || 颤抖 || 0.09 || em || 颤抖位移幅度 | |||
|- | |||
| <code>颤抖角度</code> || 颤抖 || 6 || deg || 颤抖旋转角度 | |||
|- | |||
| <code>颤抖速度</code> || 颤抖 || 继承全局 <code>速度</code>;否则 0.18 || 秒 || 颤抖层动画周期 | |||
|- | |||
| <code>颤抖延迟</code> || 颤抖 || 继承全局 <code>延迟</code>;否则 0 || 秒 || 颤抖层延迟 | |||
|- | |||
| <code>缩放倍数</code> || 缩放 || 1.1 || — || 缩放倍数(无单位) | |||
|- | |||
| <code>缩放速度</code> || 缩放 || 继承全局 <code>速度</code>;否则 0.8 || 秒 || 缩放层动画周期 | |||
|- | |||
| <code>缩放延迟</code> || 缩放 || 继承全局 <code>延迟</code>;否则 0 || 秒 || 缩放层延迟 | |||
|} | |||
== 数值解析 == | |||
* 幅度参数仅接受'''纯数字''';空值或非数字时回退为程序内置默认值(见上表)。 | |||
* 单位由模块固定(em / deg / 无),无需(也不应)在数字后追加单位。 | |||
* <code>速度</code>/<code>延迟</code> 及模式专属版本单位为秒。 | |||
== 错误处理 == | |||
* 未知模式:被忽略;全部未知时回退为 <code>颤抖</code>。 | |||
* 非法数值:回退为该参数的默认值。 | |||
* 内容为空:输出空字符串。 | |||
2026年8月31日 (一) 21:13的最新版本
模板:抖动的底层生成器,负责把模板参数转换为最终的 HTML 结构。
工作原理
模块按以下步骤工作:
- 读取参数:从调用中取得「内容、模式、逐字、速度、延迟」以及各模式对应的数值幅度参数。
- 解析模式:把
模式=平移+旋转+跳动这类字符串拆分成模式列表。 - 解析数值:把用户传入的纯数字幅度值规整为合法数值,空值或非数字时回退为程序内置默认值。
- 生成变量:把各模式的幅度数值转换为行内 CSS 自定义属性(CSS 变量),如
--dk-amp:0.05em。 - 生成结构:为每个模式各包一层
<span>并依次嵌套;逐字模式下把文字按单个字符拆开。 - 输出 HTML:模块只生成 class 名、行内 CSS 变量和必要的内联样式,动画本身由模板:抖动/styles.css提供。
模式叠加的原理
CSS 中同一元素只能运行一个 transform 动画,无法直接叠加。因此模块让每种模式各占一层 <span>:
<span class="dk-translate" style="--dk-amp:0.11em"> ← 平移层
<span class="dk-rotate" style="--dk-angle:9deg"> ← 旋转层
<span class="dk-bounce" style="--dk-amp:-0.17em"> ← 跳动层
文字
</span>
</span>
</span>
各层动画独立运行,视觉上自然叠加:外层负责整体平移,内层负责局部抖动。
逐字与整段
- 整段模式:内容作为整体被包裹,先经
frame:preprocess()处理,支持 wikitext 语法。 - 逐字模式:用
mw.ustring.gmatch(text, '.')将文字按字符拆开,每个字符成为独立抖动单元,并配以递增的负值动画延迟,使各字错位、不同步。逐字模式仅适用于纯文本。
与样式表的关系
模块不包含任何动画定义,只负责产出:
- 形如
dk-模式的 class(如dk-translate); - 各模式幅度对应的行内 CSS 自定义属性(如
style="--dk-amp:0.05em"); - 用户显式设置的速度 / 延迟内联样式(如
style="animation-duration:0.3s")。
实际动画(keyframes、位移、旋转角度等)全部定义在模板:抖动/styles.css,二者通过 class 名和 CSS 变量对应。模块输出的 class 与 CSS 变量对应关系:
| 模式 | 类名 | 行内 CSS 变量 |
|---|---|---|
| 平移 | dk-translate |
--dk-amp: <幅度>em
|
| 旋转 | dk-rotate |
--dk-angle: <角度>deg
|
| 跳动 | dk-bounce |
--dk-amp: -<高度>em
|
| 摇摆 | dk-swing |
--dk-angle: <角度>deg
|
| 颤抖 | dk-jitter |
--dk-amp: <幅度>em; --dk-angle: <角度>deg
|
| 缩放 | dk-pulse |
--dk-scale: <倍数>
|
参数与默认值
以下为模块读取的全部参数及其程序内置默认值。模式专属参数只在对应模式被启用时生效。
| 参数 | 作用模式 | 默认值 | 单位 | 说明 |
|---|---|---|---|---|
内容 |
全局 | 空(必填) | — | 要抖动的文字;也可作为第 1 个匿名参数 |
模式 |
全局 | 颤抖 | — | 抖动模式:平移/旋转/跳动/摇摆/颤抖/缩放,用 + 叠加
|
逐字 |
全局 | 否 | — | 设为 是 时逐字独立抖动
|
速度 |
全局 | 各模式自带周期 (平移 0.5s / 旋转 0.6s / 跳动 0.7s / 摇摆 0.8s / 颤抖 0.18s / 缩放 0.8s) |
秒 | 全局动画周期,越小越快;被模式专属速度覆盖 |
延迟 |
全局 | 0 | 秒 | 全局动画延迟;被模式专属延迟覆盖 |
平移幅度 |
平移 | 0.11 | em | 水平位移幅度 |
平移速度 |
平移 | 继承全局 速度;否则 0.5 |
秒 | 平移层动画周期 |
平移延迟 |
平移 | 继承全局 延迟;否则 0 |
秒 | 平移层延迟 |
旋转角度 |
旋转 | 9 | deg | 旋转角度 |
旋转速度 |
旋转 | 继承全局 速度;否则 0.6 |
秒 | 旋转层动画周期 |
旋转延迟 |
旋转 | 继承全局 延迟;否则 0 |
秒 | 旋转层延迟 |
跳动高度 |
跳动 | 0.17 | em | 向上跳动高度 |
跳动速度 |
跳动 | 继承全局 速度;否则 0.7 |
秒 | 跳动层动画周期 |
跳动延迟 |
跳动 | 继承全局 延迟;否则 0 |
秒 | 跳动层延迟 |
摇摆角度 |
摇摆 | 9 | deg | 摇摆角度 |
摇摆速度 |
摇摆 | 继承全局 速度;否则 0.8 |
秒 | 摇摆层动画周期 |
摇摆延迟 |
摇摆 | 继承全局 延迟;否则 0 |
秒 | 摇摆层延迟 |
颤抖幅度 |
颤抖 | 0.09 | em | 颤抖位移幅度 |
颤抖角度 |
颤抖 | 6 | deg | 颤抖旋转角度 |
颤抖速度 |
颤抖 | 继承全局 速度;否则 0.18 |
秒 | 颤抖层动画周期 |
颤抖延迟 |
颤抖 | 继承全局 延迟;否则 0 |
秒 | 颤抖层延迟 |
缩放倍数 |
缩放 | 1.1 | — | 缩放倍数(无单位) |
缩放速度 |
缩放 | 继承全局 速度;否则 0.8 |
秒 | 缩放层动画周期 |
缩放延迟 |
缩放 | 继承全局 延迟;否则 0 |
秒 | 缩放层延迟 |
数值解析
- 幅度参数仅接受纯数字;空值或非数字时回退为程序内置默认值(见上表)。
- 单位由模块固定(em / deg / 无),无需(也不应)在数字后追加单位。
速度/延迟及模式专属版本单位为秒。
错误处理
- 未知模式:被忽略;全部未知时回退为
颤抖。 - 非法数值:回退为该参数的默认值。
- 内容为空:输出空字符串。
