触发方式

目录悬停播放,详情自动流动。开启指针交互后,移动指针或键盘聚焦可局部晕染。

起点与终点

画布 320 × 230;平移 0, 0px;缩放 1。纹理持续变化,无倒放阶段。

时序

线性基础时钟 12000 ms,延迟 0 ms,流动速度 0.6×。跨循环累计时间,避免纹理突然跳回。

进入与退出

持续流动。目录离开恢复静态预览;指针离开清除局部晕染。指针交互已关闭。

重复操作与打断

工具栏暂停保持纹理,再次播放从原进度继续。颜色、外观与速度调节保留累计时间;观察倍速和指针位置不写入 JSON。

减少动态效果

遵循系统减少动态效果设置,显示静态水彩,关闭流动与指针晕染。

水彩设置

颜色 #0A0A0A / #E0E0E0;速度 0.6;图案缩放 0.6;扭曲速度 0.08;不透明度 1;RGB 亮度偏移 0.15;指针交互 false;指针强度 1。

版本

此版使用六层渐变噪声,不叠加纸面颗粒;比五层水彩融合采用更强的域扭曲系数,形成更细密的流动色带。与水彩模糊的值噪声和颗粒肌理不同。三个版本共用参数格式,recipeId 保留所选渲染器。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "watercolor-flow",
  "durationMs": 12000,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "watercolor",
      "property": "watercolorTime",
      "values": [
        0,
        12
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ],
  "watercolor": {
    "color1": "#0A0A0A",
    "color2": "#E0E0E0",
    "speed": 0.6,
    "scale": 0.6,
    "warpSpeed": 0.08,
    "opacity": 1,
    "brightness": 0.15,
    "cursorInteraction": false,
    "cursorIntensity": 1
  }
}

源码与复用

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

用于自己的项目

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

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