Flutter实现AppBar缩放动画时图片缩小卡顿如何优化？

核心问题排查 #

• 动画时序错位：AnimationController 配置的时长是300ms，但AnimatedSize的时长设为1s，两个动画不同步导致视觉上的卡顿，先将两个动画的时长统一为300ms。
• 冗余重绘逻辑：build方法中直接判断widget.type变化并调用带setState的triggerAnimation，会触发重复build，将该判断迁移到didUpdateWidget生命周期中：

@override
void didUpdateWidget(covariant AuthAppBar oldWidget) {
  super.didUpdateWidget(oldWidget);
  if (oldWidget.type != widget.type) {
    triggerAnimation(true);
  }
}

性能优化点 #

1. SVG资源预缓存
   SvgPicture默认不会提前缓存资源，动画过程中每帧重绘都会重复解析SVG，增加缓存参数避免重复计算：

SvgPicture.asset(
  images['title'],
  height: 70, // 固定为最大高度，不需要每帧修改
  cacheHeight: 70,
)

2. 用Transform替换直接修改组件尺寸
   直接修改Svg的height会每帧触发layout重算，改用Transform.scale做绘制层面的变换，性能提升明显：

AnimatedBuilder(
  animation: _animationController,
  builder: (ctx, _) {
    return Transform.scale(
      // 按最大高度70计算缩放比例，对应原逻辑：最小高度40，缩放比最小为40/70
      scale: titleAnimation.value / 70,
      alignment: Alignment.center,
      child: SvgPicture.asset(
        images['title'],
        height: 70,
        cacheHeight: 70,
      ),
    );
  },
)

3. 裁剪路径优化
   给自定义的AuthAppBarPath重写shouldReclip方法，避免无意义的重复裁剪：

@override
bool shouldReclip(covariant AuthAppBarPath oldClipper) {
  return oldClipper.leftPoint != leftPoint || oldClipper.rightPoint != rightPoint;
}

内容的提问来源于stack exchange，提问作者Marius Atasiei