flutter如何实现waveeffect效果

在Flutter中如何实现类似水波纹(WaveEffect)的动画效果？我想在用户点击按钮时呈现一个从中心向外扩散的圆形波纹，类似于Material Design中的inkwell效果，但需要自定义颜色、速度和大小。有没有比较高效的实现方式？是否需要使用CustomPainter或其他第三方库？最好能提供简单的代码示例。

2 回复

使用Flutter实现WaveEffect效果，可通过以下步骤：

  1. 使用CustomPainter自定义绘制波浪路径。
  2. 结合AnimationController控制波浪动画，实现动态效果。
  3. 通过数学函数（如正弦函数）生成波浪形状，调整参数控制波动幅度和频率。

示例代码可参考pub.dev上的wave包，或自行实现绘制逻辑。

更多关于flutter如何实现waveeffect效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现波浪效果（Wave Effect），可以使用多种方法。以下是两种常见实现方式：

方法一：使用CustomPainter自定义绘制

class WaveEffect extends StatefulWidget {
  @override
  _WaveEffectState createState() => _WaveEffectState();
}

class _WaveEffectState extends State<WaveEffect> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat();
  }
  
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return CustomPaint(
          painter: WavePainter(_controller.value),
          size: Size.infinite,
        );
      },
    );
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

class WavePainter extends CustomPainter {
  final double animationValue;
  
  WavePainter(this.animationValue);
  
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    
    final path = Path();
    path.moveTo(0, size.height * 0.5);
    
    for (double i = 0; i <= size.width; i++) {
      final y = size.height * 0.5 + 
                sin((i * 0.02) + (animationValue * 2 * pi)) * 20;
      path.lineTo(i, y);
    }
    
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

方法二：使用第三方库（推荐）

在pubspec.yaml中添加依赖：

dependencies:
  wave: ^0.2.0

使用示例：

import 'package:wave/wave.dart';

WaveWidget(
  backgroundColor: Colors.blue,
  size: Size(double.infinity, 200),
  waveAmplitude: 10,
  waveFrequency: 1.5,
)

关键参数说明

  • waveAmplitude: 波浪振幅
  • waveFrequency: 波浪频率
  • backgroundColor: 背景颜色
  • waveColor: 波浪颜色

推荐使用第三方库，代码更简洁且效果稳定。CustomPainter方式适合需要完全自定义的场景。

回到顶部