Flutter自定义带Child的重复淡入淡出闪烁动画实现问询

你的代码目前存在两个核心问题：动画逻辑导致无限循环，以及低效的全局状态刷新。以下是修正后的完整实现：

问题分析 #

1. 原代码中addListener内反复调用forward()和reverse()会触发无限循环，导致动画异常且性能损耗严重
2. 使用setState()全局刷新，而非针对动画部分的局部更新，降低了渲染效率

修正后的代码 #

late AnimationController _animationController;
late Animation<double> _animation;

@override
void initState() {
  super.initState();
  _animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 1200),
  );

  // 定义透明度变化的Tween动画
  _animation = Tween<double>(begin: 1, end: 0.3).animate(_animationController);
  
  // 自动重复执行动画，往返循环
  _animationController.repeat(reverse: true);
}

@override
void dispose() {
  _animationController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  // 使用AnimatedBuilder实现局部刷新，避免全局setState
  return AnimatedBuilder(
    animation: _animation,
    builder: (context, child) {
      return Container(
        height: widget.height,
        width: widget.width,
        clipBehavior: Clip.antiAlias,
        margin: EdgeInsets.fromLTRB(
          widget.marginLeft ?? 0,
          widget.marginTop ?? 0,
          widget.marginRight ?? 0,
          widget.marginBottom ?? 0,
        ),
        decoration: BoxDecoration(
          color: widget.altColor
              ? MyThemes.colorBrown
              : MyThemes.colorLightBrown.withOpacity(_animation.value),
          borderRadius: widget.radius != null
              ? BorderRadius.all(Radius.circular(widget.radius ?? 0))
              : BorderRadius.vertical(
                  bottom: Radius.circular(widget.radiusBottom ?? 0),
                  top: Radius.circular(widget.radiusTop ?? 0),
                ),
        ),
        child: widget.child,
      );
    },
  );
}

关键优化点 #

• 移除无限循环的Listener：使用repeat(reverse: true)替代手动触发forward()和reverse()，实现自动往返动画
• AnimatedBuilder局部刷新：仅在动画值变化时重建Container，避免全局状态刷新带来的性能浪费
• 保留原有功能完整性：维持了原有的自定义属性（尺寸、margin、 borderRadius、altColor等）和child支持

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