如何使用Flutter实现自定义波浪背景这类自定义形状效果

下面分三种常用实现方式，你可以根据自身需求选择：

1. CSS 实现（开发成本最低） #

适合无复杂交互、不需要1:1匹配设计稿形状的场景：

• 核心原理是创建2-3个宽高远大于视口的矩形，给矩形设置极大的圆角值，模拟出弧形波浪边缘，将元素固定在页面底部、调低层级作为背景
• 给不同的波浪元素设置不同的透明度、动画时长、水平/垂直位移参数，叠加运行后就能产生错落的波浪动态效果
• 核心代码参考：

/* 公共波浪样式 */
.wave {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200vw;
  height: 180px;
  border-radius: 43% 48% 45% 47%;
  background-color: rgba(100, 200, 255, 0.6);
  animation: waveFloat 12s linear infinite;
  z-index: -999;
}
/* 第二层波浪差异化参数 */
.wave:nth-of-type(2) {
  background-color: rgba(100, 200, 255, 0.3);
  border-radius: 47% 44% 48% 43%;
  animation-duration: 18s;
  animation-direction: reverse;
}
@keyframes waveFloat {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(0) rotate(360deg);
  }
}

• 你可以调整圆角数值、高度、颜色、动画速度匹配你需要的视觉效果。

2. SVG 实现（还原度最高，适配性最好） #

如果需要完全匹配设计稿的波浪形状，优先选择该方案：

• 直接在设计工具（Figma/Adobe Illustrator）中将波浪形状导出为SVG代码，不需要引入外部图片资源，直接将SVG代码插入页面，设置固定定位放在底层即可
• 需要动画效果的话，可以直接给SVG的path路径加属性动画，或者控制整个SVG的位移、形变，性能比CSS模拟的波浪更好，任意缩放都不会出现模糊问题，静态SVG体积通常只有几KB，加载速度远快于切图。

3. Canvas 实现（适合定制化交互场景） #

如果需要波浪跟随页面滚动、鼠标操作、音频等参数动态变化，选择该方案：

• 核心逻辑是通过贝塞尔曲线绘制波浪路径，用requestAnimationFrame定时器循环更新波峰位置重新渲染，实现流畅的动态效果
• 支持自定义波浪层数、波峰高度、移动速度，可实现点击生成波纹、波浪随音量变化等高阶交互效果。

内容的提问来源于stack exchange，提问作者ETA Dev