【老孟Flutter】41个酷炫的 Loading 组件库

た入场券 2022-12-27 04:42 3阅读 0赞

![20201207214801795.png][]

> **老孟导读**：目前 **loading** 库中包含41个动画组件，还会继续添加，同时也欢迎大家提交自己的 loading 动画组件或者直接微信发给我也可以。

Github 地址：[https://github.com/781238222/flutter-do/tree/master/m\_loading\_sample][https_github.com_781238222_flutter-do_tree_master_m_loading_sample]

效果如下：

![20201207214821816.png][]

在项目的 `pubspec.yaml` 文件中添加依赖：

dependencies:
      m_loading: ^0.0.1

执行命令：

flutter pub get

所有 loading 动画组件的用法大同小异，都有 duration（动画时长） 和 curve（动画曲线）参数，以及外观样式的设置，下面是一些 loading 动画组件的用法。

小球类的动画组件中有 **BallStyle** 类型的参数，此参数表示小球样式，用法如下：

BallCircleOpacityLoading(
      ballStyle: BallStyle(
        size: 5,
        color: Colors.red,
        ballType: BallType.solid,
      ),
    )

![20201207214822535.png][]

*  size：小球大小
 *  color：小球颜色
 *  ballType：小球类型，hollow：空心，solid：实心
 *  borderWidth：边框宽
 *  borderColor：边框颜色

设置空心球：

BallCircleOpacityLoading(
      ballStyle: BallStyle(
        size: 5,
        ballType: BallType.hollow,
        borderWidth: 1,
        borderColor: Colors.red
      ),
    )

![20201207214823260.png][]

设置动画时长和动画曲线：

Ring2InsideLoading(
      color: Colors.blue,
      duration: Duration(milliseconds: 1200),
      curve: Curves.bounceInOut,
    )

![20201207214823859.png][]

非小球类的组件使用：

PacmanLoading(
      mouthColor: Colors.blue,
      ballColor: Colors.red,
    )

![20201207214824549.png][]

PouringHourGlassLoading(
      color: Colors.blue,
    )

![20201207214826672.png][]

用法基本都是类似的，下面是所有动画组件的效果及对应的组件名称：

<table> 
 <thead> 
  <tr> 
   <th><img src="https://img-blog.csdnimg.cn/20201207214826850.png" alt=""></th> 
   <th><img src="https://img-blog.csdnimg.cn/2020120721482779.png" alt=""></th> 
   <th><img src="https://img-blog.csdnimg.cn/20201207214827225.png" alt=""></th> 
   <th><img src="https://img-blog.csdnimg.cn/20201207214827937.png" alt=""></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>BallPulseLoading</td> 
   <td>Ball4ScaleLoading</td> 
   <td>BallGridPulseLoading</td> 
   <td>BallCirclePulseLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214828347.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214828839.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214829377.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214830107.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>Ball3OpacityLoading</td> 
   <td>Ball4OpacityLoading</td> 
   <td>BallGridOpacityLoading</td> 
   <td>BallCircleRotateLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214830655.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214831215.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214831726.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214832257.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>BallBounceLoading</td> 
   <td>BallRotateScaleLoading</td> 
   <td>Ball2TrianglePathLoading</td> 
   <td>BallCircleOpacityLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214832972.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214833461.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214834950.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214835676.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>Ball3TrianglePathLoading</td> 
   <td>BallInsideBallLoading</td> 
   <td>BallClipRotatePulseLoading</td> 
   <td>BallCircleInsideRotateLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214836265.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214836979.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214837533.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/2020120721483825.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>RingRotate</td> 
   <td>Ring2InsideLoading</td> 
   <td>Ring2SymmetryLoading</td> 
   <td>RingBallRotateLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214838900.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214840175.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214840769.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214841427.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>RingClipRotateMultiple</td> 
   <td>WaterCircleLoading</td> 
   <td>Water2CircleLoading</td> 
   <td>WaterRipple</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/2020120721484238.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214842704.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214843363.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214843768.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>WaterMultipleCircleLoading</td> 
   <td>WaterPulseLoading</td> 
   <td>BarPulseLoading</td> 
   <td>BarScaleLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214844149.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214844596.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/2020120721484540.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214845567.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>BarScale1Loading</td> 
   <td>BarScalePulseOutLoading</td> 
   <td>BarMusicLoading</td> 
   <td>Square4OpacityLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214847298.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214847744.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214848346.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214848881.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>SquareFadingLoading</td> 
   <td>SquareRotateLoading</td> 
   <td>SquareGridScaleLoading</td> 
   <td>CircleRotateLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214849406.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/2020120721485037.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214850744.png" alt=""></td> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214851409.png" alt=""></td> 
  </tr> 
  <tr> 
   <td>CirclePulseLoading</td> 
   <td>CircleSquareLoading</td> 
   <td>Circle2InsideScaleLoading</td> 
   <td>PouringHourGlassLoading</td> 
  </tr> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20201207214851947.png" alt=""></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>PacmanLoading</td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 交流 ##

老孟Flutter博客（330个控件用法+实战入门系列文章）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[20201207214801795.png]: /images/20221120/67ae063894b7446581396eea4a39f8ff.png
[https_github.com_781238222_flutter-do_tree_master_m_loading_sample]: https://github.com/781238222/flutter-do/tree/master/m_loading_sample
[20201207214821816.png]: https://img-blog.csdnimg.cn/20201207214821816.png
[20201207214822535.png]: https://img-blog.csdnimg.cn/20201207214822535.png
[20201207214823260.png]: https://img-blog.csdnimg.cn/20201207214823260.png
[20201207214823859.png]: https://img-blog.csdnimg.cn/20201207214823859.png
[20201207214824549.png]: https://img-blog.csdnimg.cn/20201207214824549.png
[20201207214826672.png]: https://img-blog.csdnimg.cn/20201207214826672.png
[http_laomengit.com]: http://laomengit.com