ASCII 波形动画：交互规则、默认参数与动效说明

触发方式

指针进入字符画区域时流动，移动指针产生局部扰动，离开停止并清除扰动；键盘聚焦可播放。详情页自动流动；暂停冻结累计相位，继续接续当前进度，不演示反向返回。

起点与终点

字符画的波形相位：0 → 6.283185307；整体的横向位移：0 → 0；整体的纵向位移：0 → 0；整体的缩放：1 → 1。

时序

总时长 4000 ms，统一触发延迟 0 ms，三次贝塞尔曲线 cubic-bezier(0, 0, 1, 1)。各轨道按配置中的 start / span 和 times 分阶段运行。

进入与退出

进入字符画区域后按流场运行，离开冻结当前相位并清除指针扰动。区域内持续流动。

重复操作与打断

再次进入区域或点击播放按钮，从配置的初始相位重新开始；在区域内修改流场参数时保留当前相位，不排队。循环回绕通过累计相位保持连续。

减少动态效果

遵循系统 prefers-reduced-motion，跳过延迟、循环和动画，直接呈现目标帧。观察倍速只修改 Motion 控制器 speed，不写入配置。

字符画设置

字符 "cyslap"；字符不透明度系数 77%；字号 6.8 px；字符密度 110%；时钟倍率 2.8×；流场旋转角度 65°；扭曲 2；波形紧密度 0.4；颜色 #212121；指针扰动强度 1×，影响半径 100 px。

默认配置

这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "ascii-wave",
  "durationMs": 4000,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "ascii",
      "property": "asciiPhase",
      "values": [
        0,
        6.283185307
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ],
  "ascii": {
    "characters": "cyslap",
    "opacity": 0.77,
    "fontSize": 6.8,
    "density": 1.1,
    "speed": 2.8,
    "direction": 65,
    "twist": 2,
    "tension": 0.4,
    "color": "#212121",
    "pointerStrength": 1,
    "pointerRadius": 100
  }
}

源码与复用

GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。

用于自己的项目

进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。

目录来源标注：Ariadne. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。