flutter 路由跳转动画设置

路由动画

设置路由动画

在Theme 中统一设置路由动画

ThemeData 中 pageTransitionsTheme 属性

通过设置此属性中，不同平台的动画效果来设置路由动画。

flutter 内置了一些基础的动画效果

如果不设置会默认使用 PageTransitionsTheme的配置作为路由动画的配置

可以继承 PageTransitionsBuilder 复写 buildTransitions 方法来自定义路由动画

const pageTransitionsTheme = PageTransitionsTheme(
  builders: {
    TargetPlatform.android: CupertinoPageTransitionsBuilder(),
    TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
    TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
    TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(),
  },
);

定制自定义page实现路由动画

页面的跳转实际是推入一个route 使用的page抽象类是需要实现父类创建route方法的，在route中完成 方法buildTransitions 来实现页面跳转时的动画

自定义路由动画

自定义使用page路由动画

比如getx 或者使用goRoute来管理路由

可以通过自定义 CustomTransitionPage 的 transitionsBuilder、

animation 第一动画器 ，secondaryAnimation 第二动画器 child 推入的新页面

GoRoute(
  name: 'home',
  path: '/',
  pageBuilder: (context, state) => buildPageWithAnimation(
    state: state,
    child: const HomePage(),
  ),
),

Page<T> buildPageWithAnimation<T>({
  required Widget child,
  required GoRouterState state,
}) {
  return CustomTransitionPage(
    key: state.pageKey,
    child: child,
    transitionDuration: const Duration(seconds: 5),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
  ///页面退出时动画
  final rotateOut = RotationTransition(
    turns: Tween<double>(
      begin: 0.0,
      end: 0.1, // 旋转角度（可调）
    ).animate(CurvedAnimation(
        parent: secondaryAnimation, curve: Curves.easeInOut)),
    child: FadeTransition(
      opacity: Tween<double>(
        begin: 1.0,
        end: 0.0,
      ).animate(CurvedAnimation(
          parent: secondaryAnimation, curve: Curves.easeIn)),
      child: child,
    ),
  );

  /// 页面进入时动画
  final slideIn = SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(1.0, 0.0), // 右侧开始
      end: Offset.zero,
    ).animate(CurvedAnimation(parent: animation, curve: Curves.easeOut)),
    child: rotateOut,
  );

  // 旧页面：旋转 + 淡出
  // 新页面由右侧推入
  return slideIn;
  }
  );

新页面从下方弹出，旧页面向下消失动画

RouteTransitionsBuilder kSlideBottomToTopWithSecondary = (
  BuildContext context,
  Animation<double> animation,
  Animation<double> secondaryAnimation,
  Widget child,
) {
  return SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(0.0, 1.0),
      end: Offset.zero,
    ).animate(animation),
    child: SlideTransition(
      position: Tween<Offset>(
        begin: Offset.zero,
        end: const Offset(0.0, 1.0),
      ).animate(secondaryAnimation),
      child: child,
    ),
  );
};

自定义使用route路由动画

例如通过 Navigator 跳转时

Navigator跳转的本质是传入一个route 一般我们常用的是 MaterialPageRoute

Navigator.push( context, MaterialPageRoute(builder: (context) => Container()));

在MaterialPageRoute中默认使用的动画 就是theme里设置的动画

我们可以通过继承 MaterialPageRoute 重写 buildTransitions 来定制动画

//渐变透明路由动画
import 'package:flutter/material.dart';
class FadePageRoute<T> extends MaterialPageRoute<T> {
  final Widget child;
  final Duration duration;
  final Curve? curve;

  FadePageRoute({
    required this.child,
    this.duration = const Duration(milliseconds: 300),
    this.curve,
  }) : super(builder: (_) => child);

  @override
  Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    if (curve != null) {
      animation = CurvedAnimation(
        parent: animation,
        curve: curve!,
      );
    }
    return FadeTransition(
      opacity: Tween(begin: 0.1, end: 1.0).animate(animation),
      child: child,
    );
  }

  @override
  Duration get transitionDuration => duration;

  @override
  @protected
  bool get hasScopedWillPopCallback {
    return false;
  }
}

只需要在页面跳转时使用这个路由即可