Как отрендерить путь дуги после завершения предыдущей анимации дуги

Question

Когда я пытаюсь визуализировать две дуги на одном и том же пути, обе визуализируются одновременно, но мне нужно визуализировать вторую дугу после завершения анимации первой дуги.

Я просто хочу визуализировать вторую дугу, так как она должна начинаться с конца первой дуги и завершать оставшуюся часть анимации (непрерывная анимация).

Я прикрепил фрагмент кода ниже, может ли кто-нибудь помочь мне с этим.

      class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Circle(),
      ),
    );
  }
}

class Circle extends StatefulWidget {
  @override
  _CircleState createState() => _CircleState();
}

class _CircleState extends State<Circle> with SingleTickerProviderStateMixin {
  double? _fraction = 0.0;
  late Animation<double> _animation;
  late AnimationController _controller;
  @override
  void initState() {
    super.initState();

    _controller =
        AnimationController(duration: Duration(milliseconds: 5000), vsync: this);

    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
      ..addListener(() {
        setState(() {
          _fraction = _animation.value;
        });
      });

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Padding(
            padding: const EdgeInsets.all(24.0),
            child: CustomPaint(
              painter: CirclePainter(fraction: _fraction!),
            ),
          ),
      ),
    );
  }

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

class CirclePainter extends CustomPainter {
  final double? fraction;
  late Paint _circlePaint;

  CirclePainter({this.fraction}) {
    _circlePaint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;
  }
  final Paint _paint = Paint()
  ..color = Colors.black
  ..style = PaintingStyle.stroke
  ..strokeWidth = 3;

  @override
  void paint(Canvas canvas, Size size) {
    final Path path = Path();
    path.addArc(
      Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: 131.0909090909091),
      _degreesToRadians(-90).toDouble(), (_degreesToRadians(269.999 * fraction!).toDouble() - _degreesToRadians(-90).toDouble()));
    path.arcTo(
      Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: 42.32727272727273),
     _degreesToRadians(269.999 * fraction!).toDouble(), _degreesToRadians(-90).toDouble() - _degreesToRadians((269.999) * fraction!).toDouble(),
      false);
    path.addArc(
      Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: 131.0909090909091),
      _degreesToRadians(-90).toDouble(), (_degreesToRadians(179.999 * fraction!).toDouble() - _degreesToRadians(-90).toDouble()));
    path.arcTo(
      Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: 42.32727272727273),
     _degreesToRadians(179.999 * fraction!).toDouble(), _degreesToRadians(-90).toDouble() - _degreesToRadians((179.999) * fraction!).toDouble(),
      false);
  canvas.drawPath(path, _circlePaint);
  canvas.drawPath(path, _paint);
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) {
    return oldDelegate.fraction != fraction;
  }
}
num _degreesToRadians(num deg) => deg * (pi / 180);

Ожидал :

Answer 1

Вы можете использовать поэтапную анимацию с помощью одного AnimationController и двух Animations.

        final Animation<double> firstAnimation=
        Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(
      parent: animationController,
      curve: Interval(0, 0.5, curve: Curves.easeIn),
    ));

  final Animation<double> secondAnimation =
        Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(
      parent: animationController,
      curve: Interval(0.5,1, curve: Curves.easeIn),
    ));

Таким образом, эти две анимации начнутся одна за другой, вы можете использовать значение второй анимации для второй дуги и значение первой для первой.