Flutter实现页面切换上滑动画咨询（含首屏上滑效果）

嘿，我正好折腾过类似的需求，给你分享两个核心部分的实现思路和代码，应该能直接解决你的问题！

一、首屏的上滑入场动画 #

首屏的动画其实就是在页面初始化时，让整个页面（或者核心内容区域）从屏幕底部滑到正常位置。我常用SlideTransition配合AnimationController来实现，步骤很简单：

1. 让页面的State类混入SingleTickerProviderStateMixin，用于创建动画控制器
2. 在initState里初始化控制器和动画，启动动画
3. 用SlideTransition包裹页面内容

代码示例：

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _slideAnimation;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，时长500ms，可按需调整
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    // 设置从底部（Offset(0,1)）滑到原位置（Offset(0,0)）
    _slideAnimation = Tween<Offset>(
      begin: const Offset(0, 1),
      end: Offset.zero,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut, // 可选其他曲线如Curves.decelerate
    ));
    // 启动动画
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlideTransition(
        position: _slideAnimation,
        child: const Center(
          child: Text("首屏内容，会从底部滑上来"),
        ),
      ),
    );
  }
}

如果想要更丰富的效果，比如同时加淡入，可以把SlideTransition和FadeTransition嵌套使用~

二、页面切换的上滑动画 #

页面切换的动画需要自定义PageRoute，我们可以用PageRouteBuilder快速实现，不用从头写路由类。核心是在transitionsBuilder里定义切换时的动画逻辑：

1. 自定义上滑路由 #

class SlideUpRoute extends PageRouteBuilder {
  final Widget page;

  SlideUpRoute({required this.page})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            // 新页面从底部滑入
            var slideAnimation = Tween<Offset>(
              begin: const Offset(0, 1),
              end: Offset.zero,
            ).animate(CurvedAnimation(
              parent: animation,
              curve: Curves.easeInOut,
            ));
            return SlideTransition(
              position: slideAnimation,
              child: child,
            );
          },
          transitionDuration: const Duration(milliseconds: 400), // 切换时长
        );
}

2. 使用这个路由进行页面跳转 #

在需要跳转的地方，用Navigator.push传入自定义路由即可：

// 比如在首屏的按钮点击事件里
Navigator.push(
  context,
  SlideUpRoute(page: const SecondScreen()),
);

如果需要返回时的动画（比如从顶部滑走），可以在transitionsBuilder里根据secondaryAnimation调整逻辑，不过一般默认的返回逻辑配合这个路由已经会有反向滑出效果了，你可以试试微调~

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