flutter如何实现路由动画

在Flutter中如何自定义页面切换时的路由动画效果？我想实现类似iOS的左右滑动切换或者上下渐隐渐现的效果，但不知道具体该怎么操作。官方提供的MaterialPageRoute只有默认的动画，请问有没有更灵活的方式来自定义这些过渡动画？需要继承PageRouteBuilder还是使用Hero动画？能否提供一个简单的代码示例？

2 回复

Flutter中通过PageRouteBuilder自定义路由动画，使用PageTransitionsBuilder定义进出动画。可结合AnimatedWidget或Tween动画库实现缩放、淡入淡出等效果。

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


在Flutter中，可以通过以下几种方式实现路由动画：

1. 使用PageRouteBuilder自定义动画

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => TargetPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 淡入动画
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    transitionDuration: Duration(milliseconds: 500),
  ),
);

2. 使用MaterialPageRoute的默认动画

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => TargetPage(),
    // 可选：自定义动画时长
    // fullscreenDialog: true, // 底部向上动画
  ),
);

3. 自定义滑动动画

PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => TargetPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    const begin = Offset(1.0, 0.0); // 从右侧进入
    const end = Offset.zero;
    const curve = Curves.ease;
    
    var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
    
    return SlideTransition(
      position: animation.drive(tween),
      child: child,
    );
  },
);

4. 缩放动画

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return ScaleTransition(
    scale: Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: animation,
      curve: Curves.fastOutSlowIn,
    )),
    child: child,
  );
},

5. 旋转动画

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return RotationTransition(
    turns: Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: animation,
      curve: Curves.easeInOut,
    )),
    child: child,
  );
},

6. 组合动画

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return SlideTransition(
    position: Tween<Offset>(
      begin: Offset(1.0, 0.0),
      end: Offset.zero,
    ).animate(animation),
    child: FadeTransition(
      opacity: animation,
      child: child,
    ),
  );
},

主要参数说明：

  • pageBuilder: 构建目标页面
  • transitionsBuilder: 定义转场动画
  • transitionDuration: 动画时长
  • reverseTransitionDuration: 返回动画时长

这些方法可以灵活组合，创建各种复杂的路由动画效果。

回到顶部