Flutter 水波纹动画效果实现

1. 先上效果图：

2. 实现

我们将该动画拆成三部分来实现就比较容易了，分别是尺寸大小渐变动画、透明度渐变动画和叠加组合动画。
尺寸变换数值由补间动画Tween填补，辅以线性变换；这里圆形的大小变化我设置的是50~290范围，当然你可以设置其他范围：

var animation = Tween(begin: 50.0, end: 290.0)
        .animate(CurvedAnimation(parent: controller, curve: Curves.linear));

使用 AnimationController 控制动画：

var controller = AnimationController(
        duration: const Duration(milliseconds: 4000), vsync: this);

2.1 尺寸渐变结合透明度渐变

尺寸大小变化和透明度值变化遵循上面创建的同一个补间动画，圆形效果使用ClipOval控件进行裁剪：

      AnimatedBuilder(
          animation: controller,