Question

我正在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));
  }
}

谢谢

Ashwin

Answer 1

如果我正确理解您的问题-这些延迟是由调试模式引起的。调试中的动画总是存在一些小问题。尝试构建并发布发行版APK

动画抖动缓慢

1 个答案: