routes_transition_jr 是一个用于 Flutter 的页面路由过渡动画插件，它提供了多种内置的页面切换动画效果，可以帮助你轻松实现丰富的页面过渡效果。以下是如何使用 routes_transition_jr 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 routes_transition_jr 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  routes_transition_jr: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 以获取依赖。

2. 导入包

在需要使用 routes_transition_jr 的 Dart 文件中导入包：

import 'package:routes_transition_jr/routes_transition_jr.dart';

3. 使用路由过渡动画

routes_transition_jr 提供了多种过渡动画效果，你可以通过 RoutesTransitionJr 类来使用这些效果。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:routes_transition_jr/routes_transition_jr.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用路由过渡动画跳转到第二个页面
            RoutesTransitionJr(
              context: context,
              child: SecondPage(),
              animation: AnimationType.fade, // 选择过渡动画类型
              duration: Duration(milliseconds: 500), // 设置动画持续时间
            ).go();
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // 返回上一页
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

4. 可用的过渡动画类型

routes_transition_jr 提供了多种过渡动画类型，你可以通过 AnimationType 枚举来选择：

• AnimationType.fade：淡入淡出效果
• AnimationType.slideLeft：从左侧滑入
• AnimationType.slideRight：从右侧滑入
• AnimationType.slideTop：从顶部滑入
• AnimationType.slideBottom：从底部滑入
• AnimationType.scale：缩放效果
• AnimationType.rotate：旋转效果
• AnimationType.custom：自定义过渡效果

5. 自定义过渡动画

如果你想要使用自定义的过渡动画，可以通过 AnimationType.custom 并提供一个 PageRouteBuilder 来实现：

RoutesTransitionJr(
  context: context,
  child: SecondPage(),
  animation: AnimationType.custom,
  customRoute: (Widget child) {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => child,
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        var begin = Offset(0.0, 1.0);
        var end = Offset.zero;
        var curve = Curves.ease;
        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
        var offsetAnimation = animation.drive(tween);
        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      },
    );
  },
).go();

6. 其他配置

你还可以通过 duration 参数来设置动画的持续时间，或者通过 reverseDuration 设置反向动画的持续时间。

RoutesTransitionJr(
  context: context,
  child: SecondPage(),
  animation: AnimationType.fade,
  duration: Duration(milliseconds: 1000), // 设置动画持续时间
  reverseDuration: Duration(milliseconds: 500), // 设置反向动画持续时间
).go();