真正粘连效果需svg贝塞尔曲线动态重绘，clip-path+transition仅能线性插值静态形状，无法模拟液体张力；核心是单path中arc与c命令配合距离缩放的控制点引力响应。
用 clip-path + transition 做不出真正粘连效果
纯 CSS 无法模拟液体表面张力、融合回弹或拓扑变化——clip-path 只能切出静态形状，transition 只能在两个预设路径间线性插值。你看到的“粘连”动效，99% 是靠 SVG <path></path> 的贝塞尔曲线动态重绘实现的，CSS 负责容器定位和触发时机。
常见错误现象：clip-path: polygon(...) 配合 transition 切换时边缘生硬、无拉伸感，或者在 Safari 中直接失效；用 transform: scale() 模拟“膨胀”更假，完全没粘连逻辑。
- 真正可用场景：SVG
<path></path>的d属性动画（通过 JS 动态生成贝塞尔控制点） - 兼容性底线：Chrome/Firefox/Edge 100% 支持
SMIL或GSAP驱动的d动画；Safari 16+ 才稳定支持animate标签驱动d - 性能关键：避免每帧重算整个
d字符串；把控制点坐标存在Float32Array里，用requestAnimationFrame更新
SVG <path></path> 的 d 属性怎么写才像液体融合
核心不是画多复杂，而是让两组控制点之间产生“引力响应”：当两个圆形靠近时，它们之间的贝塞尔曲线段要自动延长、变平滑，并在接触后合并为单条连续路径。
典型错误：手写固定 d="M...C..." 然后硬切，结果融合过程像橡皮筋突然绷断；或者用 getPointAtLength() 做等距采样，但没处理曲率突变，导致视觉卡顿。
- 基础结构必须是单个
<path></path>，不能拆成多个；否则融合时会出现路径断裂 - 初始状态用两个相离的
arc段（A命令），中间用C（三次贝塞尔）连接，控制点放在两圆心连线上并随距离缩放 - 融合临界点判断用欧氏距离：当圆心距
- 示例片段：
d="M20,50 A30,30 0 0,1 80,50 C60,30 60,70 80,50"—— 注意后半段 C 的控制点刻意偏移，制造“被吸过去”的错觉
为什么用 GSAP 而不是 SMIL 或纯 CSS
SMIL 在 Safari 上长期有 d 动画跳变问题，且无法监听融合完成事件；纯 CSS 的 @keyframes 对 d 属性根本不支持动画（只有 Firefox 曾短暂实验性支持）。GSAP 是目前唯一能稳定插值任意 SVG 路径字符串、并精确控制缓动曲线的方案。
容易踩的坑：GSAP.to(path, { attr: { d: "..." } }) 直接传字符串会触发全量解析，卡顿明显；必须配合 customBounce 插件或手写 set 函数做增量更新。
- 必须开启
force3D: true，否则 SVG 元素在部分 Chrome 版本中动画掉帧 - 不要用
gsap.set(path, { attr: { d: ... } })初始化路径——它不触发渲染，得用gsap.fromTo或先设opacity: 0.001再显隐 - 参数差异：
duration设 0.6–0.8s 最符合液体惯性；ease: "power2.inOut"比"elastic"更可信，后者容易显得像果冻
移动端触摸交互时融合动画失真的原因
手指拖拽速度不均、touchmove 频率不稳定（尤其 iOS），导致控制点计算频率忽高忽低，视觉上就是“一卡一卡地粘住又弹开”。这不是动画本身问题，是输入信号噪声没滤干净。
真实场景下，用户不会匀速移动，所以不能依赖原始 touch 坐标直接算路径——必须加时间窗口平滑和最小位移阈值。
- 用
requestIdleCallback批量收集 touchmove，每 16ms 合并一次位移向量，丢弃小于 2px 的抖动 - 融合状态切换加 50ms 延迟：检测到距离进入临界区后，等半帧再开始动画，避免误触发
- 安卓 WebView 里
will-change: transform对 SVG<path></path>无效，得给父<g></g>加transform: translateZ(0)强制 GPU 加速 - 性能影响：iOS Safari 中，单帧内更新超过 3 条
<path></path>的d属性，帧率会跌破 45fps，建议限制同时融合对象 ≤ 2 个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
