flutter - Flutter：图像调整大小动画滞后

Question

我正在尝试为 AppBar 制作动画，并且图像正在缩小。

你可以在这个 gif 中看到我在说什么：

由于是gif，所以整个动画看起来有些卡顿，但实际上只有图像。

代码

class _AuthAppBarState extends State<AuthAppBar> with TickerProviderStateMixin {
  double _leftPoint = 0.0;
  double _rightPoint = 70.0;

  String _lastTriggeredType = '';

  late AnimationController _animationController;

  late Animation<double> leftPointAnimation;
  late Animation<double> rightPointAnimation;
  late Animation<double> titleAnimation;

  void triggerAnimation(bool trigger) {
    final double prevLeft = _leftPoint;
    final double prevRight = _rightPoint;
    final double prevTitleHeight = _lastTriggeredType == 'equal' ? 40 : 70;
    final double newLeft = leftPoints[widget.type];
    final double newRight = rightPoints[widget.type];
    final double newTitleHeight = widget.type == 'equal' ? 40 : 70;

    setState(() {
      leftPointAnimation = Tween<double>(begin: prevLeft, end: newLeft)
          .animate(_animationController);

      rightPointAnimation = Tween<double>(begin: prevRight, end: newRight)
          .animate(_animationController);

      titleAnimation =
          Tween<double>(begin: prevTitleHeight, end: newTitleHeight)
              .animate(_animationController);

      _rightPoint = rightPoints[widget.type];
      _leftPoint = leftPoints[widget.type];
      _lastTriggeredType = widget.type;
    });

    if (trigger && _animationController != null)
      _animationController.forward(from: 0);
  }

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );

    triggerAnimation(false);
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final size = MediaQuery.of(context).size;

    if (_animationController == null || titleAnimation == null) {
      return Container();
    }

    if (_lastTriggeredType != widget.type) triggerAnimation(true);

    // * ANIMATED CENTERED TITLE * \\
    final Center centeredTitle = Center(
      child: AnimatedBuilder(
        animation: _animationController,
        builder: (ctx, _) {
          return SvgPicture.asset(
            images['title'],
            height: titleAnimation.value,
          );
        },
      ),
    );

    // * MAIN CONTAINER - defines size and color of clip path * \\
    final container = Container(
      color: theme.primaryColor,
      child: AnimatedSize(
        curve: Curves.decelerate,
        duration: const Duration(seconds: 1),
        child: Container(
          height: widget.type == 'equal' ? 50 : size.height / 3,
          child: centeredTitle,
        ),
        vsync: this,
      ),
    );

    return AnimatedBuilder(
      builder: (context, anim) {
        return ClipPath(
          clipper: AuthAppBarPath(
            leftPoint: leftPointAnimation.value,
            rightPoint: rightPointAnimation.value,
          ),
          child: container,
        );
      },
      animation: _animationController,
    );
  }
}

我尝试使用 AnimatedSize 和 AnimatedContainer。它的工作原理相同。

非常感谢您一直以来的帮助和帮助！！

标签： flutterdartanimationmobile