Flutter 涟漪加载动画效果

老孟Flutter

发布于 2021-09-27 17:00:54

2.3K0

发布于 2021-09-27 17:00:54

文章被收录于专栏：FlutterFlutter

首先祝大家「中秋快乐」。

涟漪加载动画效果是Loading动画系列中的一个，github地址：https://github.com/LaoMengFlutter/flutter-do

Loading动画效果如下

其中涟漪加载动画效果如下

下面我们看看涟漪加载动画效果是如何实现的？动画效果实现的思路是绘制一个静止的效果，其中可变的效果使用参数控制，回到我们的涟漪加载动画，先绘制一个中间状态，效果如下：

通过静态效果我们发现涟漪加载动画效果就是几个透明度不一样的圆环，多个圆环代码如下：

class WaterRipplePainter extends CustomPainter {
  final double progress;
  final int count;
  final Color color;

  Paint _paint = Paint()..style = PaintingStyle.fill;

  WaterRipplePainter(this.progress,
      {this.count = 3, this.color = const Color(0xFF0080ff)});

  @override
  void paint(Canvas canvas, Size size) {
    double radius = min(size.width / 2, size.height / 2);

    for (int i = count; i >= 0; i--) {
      final double opacity = (1.0 - ((i + progress) / (count + 1)));
      final Color _color = color.withOpacity(opacity);
      _paint..color = _color;

      double _radius = radius * ((i + progress) / (count + 1));

      canvas.drawCircle(
          Offset(size.width / 2, size.height / 2), _radius, _paint);
    }
  }

  @override
  bool shouldRepaint(covariant WaterRipplePainter old) {
    return progress != old.progress || color != old.color || count != old.count;
  }
}

@override
Widget build(BuildContext context) {
  return CustomPaint(
    painter: WaterRipplePainter(.5,
        count: 3, color: Colors.blue),
  );
}

静态效果实现了，增加动画控制，代码如下：

class WaterRipple extends StatefulWidget {
  final Color color;
  final Duration duration;
  final Curve curve;
  final int count;

  const WaterRipple(
      {Key? key,
      this.color = Colors.blue,
      this.count = 3,
      this.duration = const Duration(milliseconds: 800),
      this.curve = Curves.linear})
      : super(key: key);

  @override
  _WaterRippleState createState() => _WaterRippleState();
}

class _WaterRippleState extends State<WaterRipple>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    _controller = AnimationController(vsync: this, duration: widget.duration)
      ..repeat();
    _animation = CurveTween(curve: widget.curve).animate(_controller);

    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return CustomPaint(
          painter: WaterRipplePainter(_animation.value,
              count: widget.count, color: widget.color),
        );
      },
    );
  }
}

最终的效果如下：