Flutter实现页面组件依次淡入效果的最优方案

针对你的需求，最优实现方式是使用**单个AnimationController**配合Interval曲线，精确控制每个组件的淡入时机，既保证性能高效，又能精准满足"前一个组件淡入至3/4进度时，下一个组件开始淡入"的要求。

实现思路 #

1. 页面跳转：通过Navigator.push完成Screen1到Screen2的跳转，这是Flutter标准页面跳转方式。
2. 动画控制：
   • 定义单个AnimationController，总时长覆盖所有组件的动画周期（第一个组件的动画时长 + 其余9个组件的启动间隔）。
   • 为每个组件分配一个Interval曲线，设置其动画的开始/结束时间点：前一个组件动画进行到3/4时，下一个组件的动画启动。
   • 用FadeTransition将动画与组件绑定，实现淡入效果。

完整代码示例 #

Screen1 页面 #

class Screen1 extends StatelessWidget {
  const Screen1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const Screen2()),
            );
          },
          child: const Text('Go to Screen 2'),
        ),
      ),
    );
  }
}

Screen2 页面（核心动画实现） #

class Screen2 extends StatefulWidget {
  const Screen2({super.key});

  @override
  State<Screen2> createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  // 单个组件的淡入动画时长（单位：秒）
  final double _singleItemAnimDuration = 1.0;
  // 前一个动画到3/4进度时启动下一个，所以间隔比例为0.75
  final double _startIntervalRatio = 0.75;
  // 组件总数
  final int _itemCount = 10;

  @override
  void initState() {
    super.initState();
    // 计算总动画时长：第一个组件时长 + 9个组件的启动间隔
    final totalDuration = Duration(
      seconds: (_singleItemAnimDuration + (_itemCount - 1) * _singleItemAnimDuration * _startIntervalRatio).toInt(),
    );
    // 初始化控制器并启动动画
    _animationController = AnimationController(
      vsync: this,
      duration: totalDuration,
    )..forward();
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen 2')),
      body: Column(
        children: List.generate(_itemCount, (index) {
          // 计算当前组件的动画时间区间（相对于总时长的比例）
          final startRatio = index * _startIntervalRatio;
          final endRatio = startRatio + _singleItemAnimDuration;
          // 创建当前组件的动画曲线
          final itemAnimation = CurvedAnimation(
            parent: _animationController,
            curve: Interval(
              startRatio,
              endRatio,
              curve: Curves.easeIn,
            ),
          );

          return FadeTransition(
            opacity: itemAnimation,
            child: Container(
              height: 50,
              margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              color: Colors.blue[100 * (index % 9 + 1)],
              alignment: Alignment.center,
              child: Text('Item ${index + 1}'),
            ),
          );
        }),
      ),
    );
  }
}

方案优势 #

• 性能高效：仅使用一个AnimationController，避免多个控制器带来的资源消耗和同步问题。
• 精准控制：通过Interval曲线严格定义每个组件的动画启动时机，完全符合"前一个组件淡入3/4时启动下一个"的需求。
• 易于维护：修改组件数量、动画时长或间隔比例只需调整对应变量，无需大量改动代码。

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