封装一个有趣的 Loading 组件

语言: CN / TW / HK

theme: v-green highlight: atom-one-dark


携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情

前言

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

组件定义

loading组件共定义4个入口参数: - 前景色:绘制图形的前景色; - 背景色:绘制图形的背景色; - 图形尺寸:绘制图形的尺寸; - 加载文字:可选,如果有文字就显示,没有就不显示。

得到的Loading组件类如下所示: ```dart 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,效果如下所示。 circle_loading.gif 这里绘制了两组沿着一个大圆运动的轴对称的实心圆,半径依次减小,圆心间距随着动画时间逐步拉大。实际上实现的核心还是基于PathPathMetrics。具体实现代码如下: ```dart _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

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

oval_loading.gif

实现代码如下所示。 ```dart 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);

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

colorful_loading.gif

贝塞尔曲线Loading

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

bezier_loading.gif

原理和圆形的一样,首先是构建贝塞尔曲线Path,代码如下。 dart 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); 这里实际是构建了两条贝塞尔曲线,先从左边到右边,然后再折回来。之后就是运动的实心圆了,这个只是数量上多了,ballCount30,这样效果看着就有一种拖影的效果。 ```dart 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坐标的互换。

bezier_loading_transform.gif ```dart 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指示加载过程,加载完成后显示图片。 ```dart class _LoadingDemoState extends State { 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, ), ), ); } `` 最终运行的效果如下,源码已提交至:[绘图相关源码](https://gitee.com/island-coder/flutter-beginner/tree/master/custom_paint),文件名为loading_animations.dart`。

loading_usage.gif

总结

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

我是岛上码农,微信公众号同名,这是Flutter 入门与实战的专栏文章,提供体系化的 Flutter 学习文章。对应源码请看这里:Flutter 入门与实战专栏源码。如有问题可以加本人微信交流,微信号:island-coder

👍🏻:觉得有收获请点个赞鼓励一下!

🌟:收藏文章,方便回看哦!

💬:评论交流,互相进步!