动画抖动缓慢 [英] Animation is slow in flutter

问题描述

我正在flutter中的画布上对动画进行动画处理.我正在使用AnimationController来控制动画.当我对单条线进行动画处理时，将对其进行动画处理，而不会出现任何滞后或性能问题.但是当我对10条以上的线进行动画处理时，在渲染线时会受到打击和滞后.在每一帧中都会调用重绘以对线进行动画处理.如何克服这个问题.

I am animating line in canvas in flutter.i am using AnimationController to control the animation. When i animate a single line, it is get animated without any lag or performance issue.But when i animate more than 10 lines it gets struck and lagging when rendering the line.In each frame redraw is getting called in order to animate the line .How to overcome this issue.

代码段

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

推荐答案

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

If I understand your problem correct - these lags caused by debug mode. There are always small problems with animation in debug. Try to build release apk and launch it

这篇关于动画抖动缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！