返回

Flutter 的 Loading 动画花样繁多，且易于实现

前端

通常，加载动画用来向用户表明应用程序正在处理数据或执行某个操作。它可以是一个简单的进度条，也可以是一个更复杂的动画，比如一个旋转的圆圈或一个跳动的球。Flutter 提供了丰富的动画库和工具，使得创建复杂的 Loading 动画变得非常容易。

上面的图中的动画第一眼看起来的确是有点复杂，但是我们来一步步分析，就会发现其实并不是那么难。仔细看一下就会发现，大致步骤如下：

  1. 首先，需要绘制一个三角形。
  2. 然后，旋转三角形。
  3. 接着，缩放三角形。
  4. 最后，让三角形消失。

大致步骤如上，下面我们就来一步步实现每个步骤。

1. 绘制三角形

知道了三角形的变化过程，首先我们需要绘制出来一个三角形，由于我们并没有三角形这种 widget，所以就需要自己来画。我们可以通过 CustomPaint 来实现。

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.black;
    paint.style = PaintingStyle.fill;

    var path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

然后，我们在某个地方使用 CustomPaint 来绘制三角形，比如在某个 widget 的 build 方法中：

@override
Widget build(BuildContext context) {
  return CustomPaint(
    painter: TrianglePainter(),
    size: Size(100, 100),
  );
}

2. 旋转三角形

接下来，我们需要旋转三角形。我们可以通过 Transform.rotate 来实现。

Transform.rotate(
  angle: pi / 4,
  child: TrianglePainter(),
);

3. 缩放三角形

然后，我们需要缩放三角形。我们可以通过 Transform.scale 来实现。

Transform.scale(
  scale: 0.5,
  child: TrianglePainter(),
);

4. 让三角形消失

最后，我们需要让三角形消失。我们可以通过 FadeTransition 来实现。

FadeTransition(
  opacity: 0.0,
  child: TrianglePainter(),
);

现在，我们已经完成了整个动画的实现。通过将这些步骤组合起来，我们可以创建出各种各样的复杂的 Loading 动画。

希望本文对您有所帮助。如果您有任何问题，请随时与我联系。