Flutter如何实现zoom转场动画

在Flutter中如何实现类似iOS的zoom转场动画效果？比如点击某个Widget时能平滑放大到全屏，返回时又能缩小回原位置。目前尝试过Hero组件但效果不太理想，缩放过程中会有闪烁现象。有没有更流畅的实现方案？最好能控制动画曲线和持续时间。求大神分享具体实现代码或思路！

2 回复

Flutter中实现zoom转场动画可使用PageRouteBuilder，结合ScaleTransition和CurvedAnimation。通过transformHitTests控制交互区域，调整缩放中心与动画曲线即可实现流畅的zoom效果。

更多关于Flutter如何实现zoom转场动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现Zoom转场动画，可以使用PageRouteBuilder自定义页面路由，结合Transform.scale实现缩放效果。以下是具体实现：

1. 基础缩放转场

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = 0.0;
      const end = 1.0;
      const curve = Curves.easeInOut;
      
      var scaleAnimation = CurvedAnimation(
        parent: animation,
        curve: curve,
      ).drive(Tween(begin: begin, end: end));
      
      return ScaleTransition(
        scale: scaleAnimation,
        child: child,
      );
    },
  ),
);

2. 带中心点缩放的转场

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  const begin = 0.0;
  const end = 1.0;
  
  var scaleAnimation = Tween(begin: begin, end: end).animate(animation);
  
  return Transform.scale(
    scale: scaleAnimation.value,
    alignment: Alignment.center, // 可调整缩放中心点
    child: child,
  );
},

3. 反向缩放退出动画

// 在第二个页面中添加退出动画
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: WillPopScope(
      onWillPop: () async {
        Navigator.pop(context);
        return false;
      },
      child: ScaleTransition(
        scale: ModalRoute.of(context)!.animation!,
        child: YourContent(),
      ),
    ),
  );
}

4. 组合其他动画（缩放+淡入）

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  const begin = 0.5;
  const end = 1.0;
  
  var scaleAnimation = Tween(begin: begin, end: end).animate(animation);
  var fadeAnimation = Tween(begin: 0.0, end: 1.0).animate(animation);
  
  return FadeTransition(
    opacity: fadeAnimation,
    child: ScaleTransition(
      scale: scaleAnimation,
      child: child,
    ),
  );
},

关键参数说明：

  • begin/end：缩放起始和结束值（0.0-1.0）
  • Curves：动画曲线，如easeInOut、bounceOut等
  • alignment：缩放中心点，默认Alignment.center

使用建议：

  • 调整begin值可控制初始缩放大小
  • 结合CurvedAnimation获得更自然的动画效果
  • 可通过Duration参数控制动画时长

这种实现方式灵活且性能良好，可以轻松定制各种缩放转场效果。

回到顶部