首页 > 解决方案 > (颤振)循环倒数计时器(进度弧)的动画无法正常工作

问题描述

我尝试为我在现有缺陷中发现的一些缺陷构建一个循环倒数计时器。

但是,除非我按下某个按钮,否则弧线无法动画化,因此它会以某种方式跛脚移动。

我附上了我的完整代码(由两个类组成),希望它足够清楚。请让我知道我做错了什么......

非常感谢和最好的问候奥马尔

//Class 1=Circular_Timer
import 'package:flutter/material.dart';
import 'dart:ui';
import 'dart:math';


class Circular_Timer extends CustomPainter {
  double controller_value;

  Circular_Timer({this.controller_value});

  @override
  void paint(Canvas canvas, Size size) {
    // Define a paint object
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0
      ..color = Colors.indigo;

    Paint outerCircle = Paint()
      ..strokeWidth = 10
      ..color = Colors.black
      ..style = PaintingStyle.stroke;

    Offset center = Offset(size.width/2, size.height/2);
    double radius = min(size.width/2,size.height/2) - 10;

    canvas.drawCircle(center, radius, outerCircle);
    Paint completeArc = Paint()
      ..strokeWidth = 10
      ..color = Colors.redAccent
      ..style = PaintingStyle.stroke
      ..strokeCap  = StrokeCap.round;
    canvas.drawArc(Rect.fromCircle(center: center,radius: radius), -pi/2, controller_value, false, completeArc);
  }

  @override
  bool shouldRepaint(Circular_Timer oldDelegate) => false;
}


    
//class2=Animated_Circular_Timer

import 'package:circular_countdown_timer/circular_countdown_timer.dart';
import 'package:ex11/Circular_Timer.dart';
import 'package:flutter/material.dart';
import 'dart:math';

class Animated_Circular_Timer extends StatefulWidget {
  @override
  _Animated_Circular_TimerState createState() => _Animated_Circular_TimerState();
}

class _Animated_Circular_TimerState extends State<Animated_Circular_Timer> with TickerProviderStateMixin {

  AnimationController controller;
  Animation animation;

  double x=((15/(2*pi)));


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller = AnimationController(
      duration: Duration(seconds: 15),
      vsync: this,
    );

    animation = Tween(begin: 0.0,end: 2*pi).animate(controller);


    controller.forward();

    animation.addListener(() {
      setState(() {
        print(animation.value);
      });

    });

  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Align(
        child: AspectRatio(
          aspectRatio: 1,
          child: Stack(
            children: [
              Positioned.fill(
                child: CustomPaint(
                    painter: Circular_Timer(controller_value: animation.value)),
              ),
            ],
          ),
        ),
      ),
    );
  }

}
    
    
    
        





    

标签: flutteranimationcustom-painting

解决方案


推荐阅读