【老孟Flutter】41個(gè)酷炫的 Loading 組件庫(kù)

老孟導(dǎo)讀：目前 loading 庫(kù)中包含41個(gè)動(dòng)畫(huà)組件，還會(huì)繼續(xù)添加，同時(shí)也歡迎大家提交自己的 loading 動(dòng)畫(huà)組件或者直接微信發(fā)給我也可以。

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

效果如下：

在項(xiàng)目的 pubspec.yaml 文件中添加依賴(lài)：

dependencies:
??m_loading:?^0.0.1

執(zhí)行命令：

flutter pub get

所有 loading 動(dòng)畫(huà)組件的用法大同小異，都有 duration（動(dòng)畫(huà)時(shí)長(zhǎng)） 和 curve（動(dòng)畫(huà)曲線(xiàn)）參數(shù)，以及外觀樣式的設(shè)置，下面是一些 loading 動(dòng)畫(huà)組件的用法。

小球類(lèi)的動(dòng)畫(huà)組件中有 BallStyle 類(lèi)型的參數(shù)，此參數(shù)表示小球樣式，用法如下：

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

• size：小球大小
• color：小球顏色
• ballType：小球類(lèi)型，hollow：空心，solid：實(shí)心
• borderWidth：邊框?qū)?/section>
• borderColor：邊框顏色

設(shè)置空心球：

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

設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)和動(dòng)畫(huà)曲線(xiàn)：

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

非小球類(lèi)的組件使用：

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

PouringHourGlassLoading(
??color:?Colors.blue,
)

用法基本都是類(lèi)似的，下面是所有動(dòng)畫(huà)組件的效果及對(duì)應(yīng)的組件名稱(chēng)：

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