Flutter 涟漪加载动画效果

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

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

Loading动画效果如下

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

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

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

代码语言：javascript复制

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;
  }
}

代码语言：javascript复制

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

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

代码语言：javascript复制

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),
        );
      },
    );
  }
}

最终的效果如下：

到这里，我们就完成了，如果你有比较酷炫的加载动画效果想要实现，可以将效果发给我，我来实现，或者已经实现的动画效果想要分享给大家，也可以发给我，我会加到github中。

github git 开源 flutter ios

0 人点赞