【老孟Flutter】41個酷炫的 Loading 組件庫

老孟導讀：目前 loading 庫中包含41個動畫組件，還會繼續添加，同時也歡迎你們提交本身的 loading 動畫組件或者直接微信發給我也能夠。

Github 地址：https://github.com/781238222/flutter-do/tree/master/m_loading_sample

效果以下：

在項目的 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,
  ),
)

• size：小球大小
• color：小球顏色
• ballType：小球類型，hollow：空心，solid：實心
• borderWidth：邊框寬
• borderColor：邊框顏色

設置空心球：

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

設置動畫時長和動畫曲線：

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

非小球類的組件使用：

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

PouringHourGlassLoading(
  color: Colors.blue,
)

用法基本都是相似的，下面是全部動畫組件的效果及對應的組件名稱：

BallPulseLoading	Ball4ScaleLoading	BallGridPulseLoading	BallCirclePulseLoading
Ball3OpacityLoading	Ball4OpacityLoading	BallGridOpacityLoading	BallCircleRotateLoading
BallBounceLoading	BallRotateScaleLoading	Ball2TrianglePathLoading	BallCircleOpacityLoading
Ball3TrianglePathLoading	BallInsideBallLoading	BallClipRotatePulseLoading	BallCircleInsideRotateLoading
RingRotate	Ring2InsideLoading	Ring2SymmetryLoading	RingBallRotateLoading
RingClipRotateMultiple	WaterCircleLoading	Water2CircleLoading	WaterRipple
WaterMultipleCircleLoading	WaterPulseLoading	BarPulseLoading	BarScaleLoading
BarScale1Loading	BarScalePulseOutLoading	BarMusicLoading	Square4OpacityLoading
SquareFadingLoading	SquareRotateLoading	SquareGridScaleLoading	CircleRotateLoading
CirclePulseLoading	CircleSquareLoading	Circle2InsideScaleLoading	PouringHourGlassLoading
PacmanLoading

交流

老孟Flutter博客（330個控件用法+實戰入門系列文章）：http://laomengit.com

歡迎加入Flutter交流羣（微信：laomengit）、關注公衆號【老孟Flutter】：