SVG实现“水流上升+波浪滚动”复合动效需分控：1.用clipPath裁剪控制水位垂直上升；2.用translateX循环位移实现波浪水平滚动；3.叠加多层波浪并优化GPU加速、will-change及响应式适配。
在 H5 页面中用 SVG 实现“水流上升 + 波浪滚动”的复合动效，核心是把两个动作分开控制：一是整体水位垂直上升（模拟灌满容器），二是波浪路径水平平移（制造流动感）。两者叠加，就能做出真实、可控的“水面上升并波动”效果。
1. 搭建基础 SVG 容器与波浪路径
先定义一个固定 viewBox 的 SVG，作为水位容器；内部用 <path> 描绘一条横向重复的正弦波形（推荐用贝塞尔曲线，比纯 sin 计算更轻量）：
- viewBox 宽高比要匹配实际容器，例如
viewBox="0 0 600 200"，其中高度 200 表示最大水位 - 路径 d 属性从左到右绘制完整波形，末尾向下闭合到底部，再向左封口，形成可填充的封闭区域
- 示例路径（单周期波浪，可重复拼接）：
d="M0,150 Q150,130 300,150 T600,150 L600,200 L0,200 Z"
2. 控制水位上升：用 clipPath 或 y 变换裁剪
真正“上升”的不是波浪本身，而是水面可见区域的顶部边界。推荐用 clipPath 动态裁剪：
- 定义一个
<clipPath>，内部放一个<rect>，其y值随动画从 200 降到 0（即裁剪框上移，露出更多水） - 给波浪
<path>添加clip-path="url(#water-clip)" - CSS 动画控制
<rect>的 y：从y="200"→y="0"，耗时比如 3s，ease-out更符合液体惯性
3. 实现波浪滚动：translateX 循环位移
波浪的“流动感”靠水平移动实现。关键点是无缝循环：
- 复制两段相同波浪路径（或用
<use>引用同一<path>），左右紧贴排列 - 对整个波浪组设置
transform: translateX(0)→translateX(-600px)（即一个完整波长） - 动画时长独立于水位上升，例如 4s linear infinite，这样波浪持续滚动，而水位缓慢涨满
- 为增强真实感，可叠加 2–3 层波浪：每层用不同
animation-duration、fill-opacity和轻微scaleY，避免同步僵硬
4. 优化细节与兼容性
移动端和低端设备容易卡顿，注意这些实操要点：
- 给 SVG 外层容器加
style="transform: translateZ(0)"，强制启用 GPU 加速 - 避免用
left/top动画；只用transform: translateX/Y和clipPath - 如果 iOS Safari 出现闪烁，给
<path>加will-change: transform（仅动画元素） - 响应式处理：用 CSS 变量定义波长、振幅，配合
calc()动态适配不同屏幕宽度
