我遇到了这个代码的问题,动画控制器上的速度不起作用。当它必须从上一个值传递到下一个值时,它会使速度太快,我该如何解决它?它是一个径向计数器,当你添加一个任务时,它会计算一天中完成任务的百分比。
class RadialProgress extends StatefulWidget {
final porcentaje;
final Color colorprimario;
final Color colorsecundario;
final double grosorsecundario;
final double grosorprimario;
RadialProgress({
@required this.porcentaje,
this.colorprimario = Colors.blue,
this.colorsecundario = Colors.grey,
this.grosorsecundario = 4,
this.grosorprimario = 10
});
@override
_RadialProgressState createState() => _RadialProgressState();
}
double porcentaje;
class _RadialProgressState extends State<RadialProgress> with SingleTickerProviderStateMixin{
AnimationController controller;
double porcentajeAnterior;
@override
void initState() {
porcentajeAnterior = widget.porcentaje;
controller = new AnimationController(vsync: this, duration: Duration( milliseconds: 1000 ));
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
controller.forward( from: 0.0 );
final diferenciaAnimar = widget.porcentaje - porcentajeAnterior;
porcentajeAnterior = widget.porcentaje;
return AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return StreamBuilder<List<Todo>>(
stream: DatabaseService().trueItems(),
builder: (context, snapshot) {
// List<Todo> trueitems = snapshot.data;
if (!snapshot.hasData) return SizedBox();
return Container(
padding: EdgeInsets.all(10),
width: double.infinity,
height: double.infinity,
child: StreamBuilder<List<Todo>>(
stream: DatabaseService().listTodos(),
builder: (context, snapshot) {
// List<Todo> listtodo = snapshot.data;
// final porcentaje = ((trueitems.length/listtodo.length)).toDouble();
return CustomPaint(
painter: _MiRadialProgress(
( ((widget.porcentaje*100) - (diferenciaAnimar))) + (((diferenciaAnimar) * controller.value)),
widget.colorprimario,
widget.colorsecundario,
widget.grosorsecundario,
widget.grosorprimario)
);
}
),
// child: Text('${widget.porcentaje}'),
);
}
);
}
);
}
}
我把_miradialprogress
代码,如果它可以帮助太多。谢谢!
class _MiRadialProgress extends CustomPainter{
final porcentaje;
final colorprimario;
final colorsecundario;
final double grosorsecundario;
final double grosorprimario;
_MiRadialProgress(
this.porcentaje,
this.colorprimario,
this.colorsecundario,
this.grosorsecundario,
this.grosorprimario
);
@override
void paint(Canvas canvas, Size size) {
// Completed circle
final paint = new Paint()
..strokeWidth = grosorsecundario
..color = colorsecundario
..style = PaintingStyle.stroke;
final center = new Offset(size.width * 0.5, size.height * 0.5);
final radio = min(size.width * 0.5, size.height * 0.5);
canvas.drawCircle(center, radio, paint);
//arc
final paintArco = new Paint()
..strokeWidth = grosorprimario
..color = colorprimario
..style = PaintingStyle.stroke;
//part that have to be filled
double arcAngle = 2* pi * (porcentaje / 100);
canvas.drawArc(
Rect.fromCircle(center: center, radius: radio),
-pi / 2 ,
arcAngle,
false,
paintArco);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate)=> true;
}
1条答案
按热度按时间kqlmhetl1#
你不应该把
controller.forward( from: 0.0 );
放在build方法里面,因为你会在每次re-render(build方法执行)的时候启动动画。可能是你的动画在渲染的时候又重新开始了,所以看起来好像它不工作。只要把动画启动代码放在initState
方法里面: