Flutter - 圆形显示动画

在Flutter中，我们可以使用CustomPaint和Canvas绘制各种形状。在本篇文章中，我们将使用这些类来绘制一个圆形，并使用动画将其逐渐呈现出来。

实现步骤

1.首先要建立一个继承CustomPainter的自定义画笔类CirclePainter，用于绘制圆形。

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制圆形的代码
  }

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

2.在画笔类中的paint方法中，创建一个圆形路径，并通过canvas画布将其绘制出来。

// 绘制圆形的代码
Paint paint = Paint()..color = Colors.blue..strokeWidth = 5;
canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);

3.接着，在圆形路径绘制完成后，我们可以使用AnimationController来控制这个圆形的动画效果。

AnimationController _controller;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    vsync: this,
    duration: Duration(seconds: 2),
  )..addListener(() {
    setState(() {});
  });

  _controller.forward();
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return CustomPaint(
    painter: CirclePainter(),
    size: Size(200, 200),
    willChange: true,
    painter: CirclePainter(progress: _controller.value),
  );
}

4.最后，我们在自定义画笔类中添加一个progress参数，并在paint方法中使用它来绘制圆形的部分区域。通过progress的值，我们可以逐渐呈现出整个圆形。

class CirclePainter extends CustomPainter {

  double progress;

  CirclePainter({this.progress = 0.0});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5;

    double radius = size.width / 2;

    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      radius,
      paint,
    );

    paint.color = Colors.white;
    canvas.drawArc(
      Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: radius),
      -pi / 2,
      2 * pi * progress,
      false,
      paint,
    );
  }

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

完整代码

import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..addListener(() {
      setState(() {});
    });

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(200, 200),
          painter: CirclePainter(progress: _controller.value),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {

  double progress;

  CirclePainter({this.progress = 0.0});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5;

    double radius = size.width / 2;

    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      radius,
      paint,
    );

    paint.color = Colors.white;
    canvas.drawArc(
      Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: radius),
      -pi / 2,
      2 * pi * progress,
      false,
      paint,
    );
  }

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

结语

通过这个例子，我们了解了如何使用CustomPaint和Canvas来创建自定义形状，并使用AnimationController控制动画效果。在实际开发中，这种方式可以帮助我们实现更加复杂的动画效果。