Flutter 动画是缓慢的颤振

我正在用颤振为画布中的线条设置动画。我正在使用AnimationController来控制动画。当我为一条线设置动画时，它会被设置为动画，没有任何延迟或性能问题。但是当我为超过10条线设置动画时，它会在渲染该线时被击中并延迟。在每个帧中，都会调用重画来为该线设置动画。如何克服此问题

代码片段

class CrossPainter extends CustomPainter {
  Paint _paint;
  double _fraction;
  CrossPainter(this._fraction) {
    _paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 10.0
      ..strokeCap = StrokeCap.round;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.clipRect(Rect.fromLTRB(0, 0, _fraction * size.width , size.height));
    canvas.drawLine(Offset(0.0, 0.0), Offset(size.width , size.height ), _paint);
     canvas.drawLine(Offset(size.width, 0.0), Offset(size.width - size.width, size.height ), _paint);
  }

  @override
  bool shouldRepaint(CrossPainter oldDelegate) {
    return oldDelegate._fraction != _fraction;
  }
}

typedef FadeBuilder = Widget Function(BuildContext, double);
class _AnimationWrapper extends StatefulWidget {
  const _AnimationWrapper({this.builder});
  final FadeBuilder builder;

  @override
  _AnimationWrapperState createState() => _AnimationWrapperState();
}

class _AnimationWrapperState extends State<_AnimationWrapper> with SingleTickerProviderStateMixin {
  double opacity = 0.0;
  double _fraction = 0.0;
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: Duration(milliseconds: 3000), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          _fraction = animation.value;
        });
      }
      );
    controller.forward();
  }
  @override void didUpdateWidget(_AnimationWrapper oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }
  @override
  Widget build(BuildContext context) {
   return CustomPaint(painter: CrossPainter(_fraction));
  }
}

类CrossPainter扩展了CustomPainter{
油漆；
双_分数；
交叉画师（这个分数）{
_油漆=油漆（）
…颜色=颜色
..冲程宽度=10.0
..strokeCap=strokeCap.round；
}
@凌驾
空心油漆（帆布，尺寸）{
canvas.clipRect（Rect.fromLTRB（0,0，_分数*size.width，size.height））；
画布.绘制线（偏移量（0.0,0.0），偏移量（大小.宽度，大小.高度），_-paint）；
画布.绘制线（偏移量（尺寸.宽度，0.0），偏移量（尺寸.宽度-尺寸.宽度，尺寸.高度），_paint）；
}
@凌驾
布尔应重新绘制（交叉绘制）{
返回oldDelegate.\u分数！=\u分数；
}
}
typedef FadeBuilder=小部件函数（BuildContext，双精度）；
类_AnimationWrapper扩展StatefulWidget{
const_AnimationWrapper（{this.builder}）；
最终FadeBuilder生成器；
@凌驾
_AnimationWrapperState createState（）=>\u AnimationWrapperState（）；
}
类_AnimationWrapperState使用SingleTickerProviderStateMixin扩展状态{
双重不透明度=0.0；
双_分数=0.0；
动画；
动画控制器；
@凌驾
void initState（）{
super.initState（）；
控制器=AnimationController（持续时间：持续时间（毫秒：3000），vsync:this）；
动画=Tween（开始：0.0，结束：1.0）。动画（控制器）
…addListener（）{
设置状态（）{
_分数=动画值；
});
}
);
controller.forward（）；
}
@覆盖void didUpdateWidget（_animationWrapperoldWidget）{
//TODO:实现didUpdateWidget
super.didUpdateWidget（oldWidget）；
}
@凌驾
小部件构建（构建上下文）{
返回自定义绘制（绘制者：交叉绘制者（_分数））；
}
}

谢谢

---

Ashwin

如果我理解您的问题，请更正-这些延迟是由调试模式造成的。调试中的动画总是有一些小问题。

---

尝试构建发布版apk并启动它

请参阅@pskink谢谢。我会的check@pskink如果你看看这个，我会非常感激的