封装一个有趣的 Loading 组件

前言

在上一篇普通的加载千篇一律，有趣的 loading 万里挑一 中，我们介绍了使用Path类的PathMetrics属性来控制绘制点在路径上运动来实现比较有趣的loading效果。有评论说因为是黑色背景，所以看着好看。黑色背景确实显得高端一点，但是并不是其他配色也不行，本篇我们来封装一个可以自定义配置前景色和背景色的Loading组件。

组件定义

loading组件共定义4个入口参数：

• 前景色：绘制图形的前景色；
• 背景色：绘制图形的背景色；
• 图形尺寸：绘制图形的尺寸；
• 加载文字：可选，如果有文字就显示，没有就不显示。

得到的Loading组件类如下所示：

class LoadingAnimations extends StatefulWidget {

  final Color bgColor;

  final Color foregroundColor;

  String? loadingText;

  final double size;

  LoadingAnimations(

      {required this.foregroundColor,

      required this.bgColor,

      this.loadingText,

      this.size = 100.0,

      Key? key})

      : super(key: key);


  @override

  _LoadingAnimationsState createState() => _LoadingAnimationsState();

}

圆形Loading

我们先来实现一个圆形的loading，效果如下所示。  这里绘制了两组沿着一个大圆运动的轴对称的实心圆，半径依次减小，圆心间距随着动画时间逐步拉大。实际上实现的核心还是基于Path的PathMetrics。具体实现代码如下：

_drawCircleLoadingAnimaion(

      Canvas canvas, Size size, Offset center, Paint paint) {

  final radius = boxSize / 2;

  final ballCount = 6;

  final ballRadius = boxSize / 15;


  var circlePath = Path()

    ..addOval(Rect.fromCircle(center: center, radius: radius));


  var circleMetrics = circlePath.computeMetrics();

  for (var pathMetric in circleMetrics) {

    for (var i = 0; i < ballCount; ++i) {

      var lengthRatio = animationValue * (1 - i / ballCount);

      var tangent =

          pathMetric.getTangentForOffset(pathMetric.length * lengthRatio);


      var ballPosition = tangent!.position;

      canvas.drawCircle(ballPosition, ballRadius / (1 + i), paint);

      canvas.drawCircle(

          Offset(size.width - tangent.position.dx,

              size.height - tangent.position.dy),

          ballRadius / (1 + i),

          paint);

    }

  }

}

其中路径比例为lengthRatio，通过animationValue乘以一个系数使得实心圆的间距越来越大 ，同时通过Offset(size.width - tangent.position.dx, size.height - tangent.position.dy)绘制了一组对对称的实心圆，这样整体就有一个圆形的效果了，动起来也会更有趣一点。

椭圆运动Loading

椭圆和圆形没什么区别，这里我们搞个渐变的效果看看，利用之前介绍过的Paint的shader可以实现渐变色绘制效果。

实现代码如下所示。

final ballCount = 6;

final ballRadius = boxSize / 15;


var ovalPath = Path()

  ..addOval(Rect.fromCenter(

      center: center, width: boxSize, height: boxSize / 1.5));

paint.shader = LinearGradient(

  begin: Alignment.topLeft,

  end: Alignment.bottomRight,

  colors: [this.foregroundColor, this.bgColor],

).createShader(Offset.zero & size);

var ovalMetrics = ovalPath.computeMetrics();

for (var pathMetric in ovalMetrics) {

  for (var i = 0; i < ballCount; ++i) {

    var lengthRatio = animationValue * (1 - i / ballCount);

    var tangent =

        pathMetric.getTangentForOffset(pathMetric.length * lengthRatio);


    var ballPosition = tangent!.position;

    canvas.drawCircle(ballPosition, ballRadius / (1 + i), paint);

    canvas.drawCircle(

        Offset(size.width - tangent.position.dx,

            size.height - tangent.position.dy),

        ballRadius / (1 + i),

        paint);

  }

}

当然，如果渐变色的颜色更丰富一点会更有趣些。

贝塞尔曲线Loading

通过贝塞尔曲线构建一条Path，让一组圆形沿着贝塞尔曲线运动的Loading效果也很有趣。

原理和圆形的一样，首先是构建贝塞尔曲线Path，代码如下。

var bezierPath = Path()

  ..moveTo(size.width / 2 - boxSize / 2, center.dy)

  ..quadraticBezierTo(size.width / 2 - boxSize / 4, center.dy - boxSize / 4,

      size.width / 2, center.dy)

  ..quadraticBezierTo(size.width / 2 + boxSize / 4, center.dy + boxSize / 4,

      size.width / 2 + boxSize / 2, center.dy)

  ..quadraticBezierTo(size.width / 2 + boxSize / 4, center.dy - boxSize / 4,

      size.width / 2, center.dy)

  ..quadraticBezierTo(size.width / 2 - boxSize / 4, center.dy + boxSize / 4,

      size.width / 2 - boxSize / 2, center.dy);

这里实际是构建了两条贝塞尔曲线，先从左边到右边，然后再折回来。之后就是运动的实心圆了，这个只是数量上多了，ballCount为30，这样效果看着就有一种拖影的效果。

var ovalMetrics = bezierPath.computeMetrics();

for (var pathMetric in ovalMetrics) {

  for (var i = 0; i < ballCount; ++i) {

    var lengthRatio = animationValue * (1 - i / ballCount);

    var tangent =

        pathMetric.getTangentForOffset(pathMetric.length * lengthRatio);


    var ballPosition = tangent!.position;

    canvas.drawCircle(ballPosition, ballRadius / (1 + i), paint);

    canvas.drawCircle(

        Offset(size.width - tangent.position.dx,

            size.height - tangent.position.dy),

        ballRadius / (1 + i),

        paint);

  }

}

这里还可以改变运动方向，实现一些其他的效果，例如下面的效果，第二组圆球的绘制位置实际上是第一组圆球的x、y坐标的互换。

var lengthRatio = animationValue * (1 - i / ballCount);

var tangent =

    pathMetric.getTangentForOffset(pathMetric.length * lengthRatio);


var ballPosition = tangent!.position;

canvas.drawCircle(ballPosition, ballRadius / (1 + i), paint);

canvas.drawCircle(Offset(tangent.position.dy, tangent.position.dx),

    ballRadius / (1 + i), paint);

组件使用

我们来看如何使用我们定义的这个组件，使用代码如下，我们用Future延迟模拟了一个加载效果，在加载过程中使用loading指示加载过程，加载完成后显示图片。

class _LoadingDemoState extends State<LoadingDemo> {

  var loaded = false;


  @override

  void initState() {

    super.initState();

    Future.delayed(Duration(seconds: 5), () {

      setState(() {

        loaded = true;

      });

    });

  }


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.white,

      appBar: AppBar(

        title: Text('Loading 使用'),

      ),

      body: Center(

        child: loaded

            ? Image.asset(

                'images/beauty.jpeg',

                width: 100.0,

              )

            : LoadingAnimations(

                foregroundColor: Colors.blue,

                bgColor: Colors.white,

                size: 100.0,

              ),

      ),

    );

  }

最终运行的效果如下，源码已提交至：绘图相关源码，文件名为loading_animations.dart。

总结

本篇介绍了Loading组件的封装方法，核心要点还是利用Path和动画控制绘制元素的运动轨迹来实现更有趣的效果。在实际应用过程中，也可以根据交互设计的需要，做一些其他有趣的加载动效，提高等待过程的趣味性。