flutter 页面加载动画_十、Flutter加载动画

目录

一、效果展示

二、RoundPainter

三、RoundProgress

四、旋转起来

五、停止旋转

一、效果展示

Flutter加载动画.jpg

二、RoundPainter

同上篇文章《九、Flutter水波动画》画水波原理是一样的，都是通过画笔呈现不规则图形。this.offsetList是存储加载的动画里面的实心圆的坐标，通过drawCircle方法把坐标画到画布上。

@override

void paint(Canvas canvas, Size size) {

for (int i = 0; i < this.offsetList.length; i++) {

var paint = new Paint()

..color = this.color

..style = PaintingStyle.fill;

canvas.drawCircle(this.offsetList[i], this.radiusList[i], paint);

}

}

三、RoundProgress

RoundProgress继承StatefulWidget通过 Timer刷新页面，来达到动画的效果。this.w * i / this.numOfMoveView是计算每个实心圆的宽度的，i越小实心圆的宽度越小，实心圆就越小。(pi * 2.0 / this.numOfMoveView) * i计算出弧度，通过弧度计算出每个实心圆的坐标，保存在this.offsetLis