肥皂泡控件

触发方式

目录悬停、聚焦或 Preview 开始流动；离开且失焦、离屏或后台时停止。原生按钮可按下，搜索框可输入，开关可切换，滑块可拖动或用方向键调整；菜单支持方向键、Enter 和 Escape。

起点与终点

薄膜在当前静态相位等待，激活后持续流动；按压时表面鼓起，松开恢复。

进入与退出

菜单从圆形触发器展开为面板，退出时回到触发器；快速操作保持当前进度。

内容与默认状态

控件缩放 1×，圆角 40px，背景 plain，可操作。预览 showcase，统一灰色 #f1f1f1背景，主按钮「Continue」，搜索提示「Search」，菜单「Select chats / Read all」，Volume 默认 40，开关默认开启。

运动

晃动强度 (wobble)：0.4；薄膜流速 (speed)：1；纹理种子 (seed)：7；点击散开效果 (pop)：droplets；冻结薄膜 (paused)：false。

透明与折射

重叠透视 (seeThrough)：0.3；重叠弯曲 (seeThroughBend)：0.3；折射强度 (refraction)：0.15；底色不透明度 (opacity)：0；油膜不透明度 (oilOpacity)：1。

薄膜材质

液态玻璃 (glass)：0.95；油膜色彩强度 (iridescence)：0.5；油膜纹路大小 (filmScale)：4.85；油膜覆盖率 (oilCoverage)：0.73；边缘油膜宽度 (oilEdge)：18；边缘油膜衰减 (oilEdgeFade)：2.33；中央清澈度 (clearCenter)：0.57；薄膜厚度 (thickness)：480；重力排水 (drainage)：0.35；涡流强度 (swirl)：0.5；反射亮度 (reflectivity)：1.3；色散强度 (dispersion)：1；玻璃边缘宽度 (bevel)：14。

薄膜配色

油膜调色方式 (soapPalette)：natural；材质底色 (tint)：auto；油膜滤色 (soapColor)：auto；薄膜暗部色 (soapShadeColor)：auto；薄膜高光色 (soapHighlightColor)：auto；底部阴影色 (bottomShadeColor)：#ffffff；红粉色带 (soapPaletteRed)：#ff6685；金黄色带 (soapPaletteGold)：#f6d365；绿色色带 (soapPaletteGreen)：#83e8a9；青色色带 (soapPaletteCyan)：#60dce9；蓝色色带 (soapPaletteBlue)：#7799ff；紫色色带 (soapPaletteViolet)：#c084fc。

环境反射

环境映像 (mirage)：0.7；映像范围 (reach)：2；指针视差 (tilt)：1；顶部高光长度 (topLength)：1；顶部高光渐隐 (topFade)：0.4；顶部高光末端 (topTail)：1；光照环境 (environment)：auto；内部倒影形状 (windowTwinShape)：mirror；显示内部倒影 (windowTwin)：false；显示主光反射 (keyLight)：true；显示底部阴影 (bottomShade)：false。

窗光与闪点

窗光大小 (windowSize)：0.75；窗光宽度 (windowWidth)：0.8；窗光起点厚度 (windowHead)：0.7；窗光末端厚度 (windowTail)：0.6；窗光亮度 (windowIntensity)：0.85；窗光渐隐 (windowGradient)：0.96；窗光长度 (windowLength)：1.3；窗光内边距 (windowMargin)：0.85；窗光弯曲 (windowBend)：0.75；闪点大小 (glintSize)：1.65；闪点亮度 (glintIntensity)：0；闪点沿线位置 (glintDistance)：-0.45；闪点内外位置 (glintHeight)：0.65；窗光形状 (windowStyle)：edge；闪点形状 (glintShape)：auto；显示窗光 (windowLight)：false。

渲染与背景

渲染像素比上限 (maxDpr)：2。

参数关系

油膜不透明度独立于底色不透明度；中央清澈度清除中部色膜，边缘油膜宽度只影响大控件；色散需要液态玻璃，窗光与闪点需要启用窗光，六色色带需要自定义调色。重叠透视和弯曲可打开菜单观察。

时序

菜单响应基准 500 ms；晃动 0.4，薄膜流速 1。薄膜持续流动。工具栏暂停冻结全部时钟，再次播放从当前相位继续。

重复操作与打断

连续操作转向最新状态，不排队。右侧参数与默认文字保存进 JSON；预览中的输入、开关值、菜单、滑块值、焦点和观察倍速属于临时状态。配置、中文说明、Motion 参数、离线 HTML 与工程导出读取同一份设置。

减少动态效果

薄膜保持静态，不自动晃动或播放点击散开；菜单立即到位，原生搜索、开关、滑块和键盘操作保留。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "soap-bubble",
  "durationMs": 500,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "soapBubble": {
    "wobble": 0.4,
    "speed": 1,
    "seed": 7,
    "seeThrough": 0.3,
    "seeThroughBend": 0.3,
    "refraction": 0.15,
    "opacity": 0,
    "oilOpacity": 1,
    "uiScale": 1,
    "radius": 40,
    "glass": 0.95,
    "iridescence": 0.5,
    "filmScale": 4.85,
    "oilCoverage": 0.73,
    "oilEdge": 18,
    "oilEdgeFade": 2.33,
    "clearCenter": 0.57,
    "thickness": 480,
    "drainage": 0.35,
    "swirl": 0.5,
    "reflectivity": 1.3,
    "dispersion": 1,
    "bevel": 14,
    "mirage": 0.7,
    "reach": 2,
    "tilt": 1,
    "windowSize": 0.75,
    "windowWidth": 0.8,
    "windowHead": 0.7,
    "windowTail": 0.6,
    "windowIntensity": 0.85,
    "windowGradient": 0.96,
    "windowLength": 1.3,
    "windowMargin": 0.85,
    "windowBend": 0.75,
    "glintSize": 1.65,
    "glintIntensity": 0,
    "glintDistance": -0.45,
    "glintHeight": 0.65,
    "topLength": 1,
    "topFade": 0.4,
    "topTail": 1,
    "maxDpr": 2,
    "element": "showcase",
    "page": "neutral",
    "backdrop": "plain",
    "pop": "droplets",
    "soapPalette": "natural",
    "environment": "auto",
    "windowStyle": "edge",
    "glintShape": "auto",
    "windowTwinShape": "mirror",
    "paused": false,
    "windowLight": false,
    "windowTwin": false,
    "keyLight": true,
    "bottomShade": false,
    "defaultChecked": true,
    "disabled": false,
    "tint": "auto",
    "soapColor": "auto",
    "soapShadeColor": "auto",
    "soapHighlightColor": "auto",
    "bottomShadeColor": "#ffffff",
    "soapPaletteRed": "#ff6685",
    "soapPaletteGold": "#f6d365",
    "soapPaletteGreen": "#83e8a9",
    "soapPaletteCyan": "#60dce9",
    "soapPaletteBlue": "#7799ff",
    "soapPaletteViolet": "#c084fc",
    "toggleColor": "#28c64f",
    "sliderFrom": "#0986ff",
    "sliderTo": "#9d7bff",
    "buttonText": "Continue",
    "searchPlaceholder": "Search",
    "menuFirst": "Select chats",
    "menuSecond": "Read all",
    "sliderLabel": "Volume",
    "sliderValue": 40
  }
}

源码与复用

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

• 查看此动效的 GitHub 源码 ↗
• 中文源码说明
• 机器可读动效目录

用于自己的项目

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

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

• 调参与实现流程
• 键盘与减少动态效果检查
• 全部动效说明