flutter如何实现退出时的缩放动画

在Flutter中，当用户退出页面时，如何实现类似缩放消失的动画效果？我希望页面能像缩小到中心点一样逐渐消失，而不是直接跳转。目前尝试过PageRouteBuilder，但只能处理进入动画，退出时效果不理想。有没有完整的实现示例或推荐的方式？

2 回复

在Flutter中，使用PageRouteBuilder自定义路由，在pageBuilder中设置缩放动画。通过Tween定义缩放比例，例如从1.0到0.0，结合CurvedAnimation实现平滑过渡。在Navigator.pop时触发动画即可。

更多关于flutter如何实现退出时的缩放动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现退出时的缩放动画，可以使用PageRouteBuilder自定义路由过渡动画。以下是具体实现方法：

核心代码示例：

// 跳转时使用自定义路由
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => TargetPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 退出时缩放动画
      return ScaleTransition(
        scale: Tween<double>(
          begin: 1.0,  // 初始大小
          end: 0.0,   // 缩小到0
        ).animate(CurvedAnimation(
          parent: animation,
          curve: Curves.easeIn, // 动画曲线
        )),
        child: child,
      );
    },
    transitionDuration: Duration(milliseconds: 300), // 动画时长
  ),
);

关键点说明：

  1. 使用PageRouteBuilder创建自定义路由
  2. transitionsBuilder中返回ScaleTransition
  3. 通过Tween设置缩放范围（1.0→0.0）
  4. CurvedAnimation定义动画曲线
  5. transitionDuration控制动画时长

如果需要反向动画（进入时放大），可以这样修改：

scale: Tween<double>(begin: 0.0, end: 1.0).animate(...)

这种方法可以灵活控制页面退出时的缩放效果，通过调整参数可以实现各种缩放动画变体。

回到顶部