Flutter自定义路由过渡动画插件custom_route_transition_an的使用

custom_route_transition_an 是一个用于 Flutter 的自定义路由过渡动画插件，它允许你为应用中的页面切换添加自定义的过渡效果。使用这个插件，你可以轻松地创建独特的页面切换动画，从而提升用户体验。

以下是如何使用 custom_route_transition_an 插件的步骤：

1. 添加依赖

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

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

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

2. 导入包

在需要使用自定义路由过渡动画的文件中导入包：

import 'package:custom_route_transition_an/custom_route_transition_an.dart';

3. 使用自定义路由过渡动画

你可以使用 CustomRouteTransition 来定义自定义的路由过渡动画。以下是一个简单的示例，展示如何在页面之间使用自定义过渡动画。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Route Transition Demo',
      home: HomePage(),
      onGenerateRoute: (settings) {
        if (settings.name == '/second') {
          return CustomRouteTransition(
            builder: (context) => SecondPage(),
            transitionType: TransitionType.slideRight, // 自定义过渡类型
            duration: Duration(milliseconds: 500), // 过渡动画持续时间
          );
        }
        return null;
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          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. 自定义过渡类型

CustomRouteTransition 提供了多种内置的过渡类型，比如 TransitionType.slideRight、TransitionType.fade、TransitionType.scale 等。你可以根据需要选择合适的过渡类型。

你也可以自定义过渡动画，通过传递 transitionBuilder 参数来实现：

return CustomRouteTransition(
  builder: (context) => SecondPage(),
  transitionBuilder: (context, animation, secondaryAnimation, child) {
    return ScaleTransition(
      scale: animation,
      child: child,
    );
  },
  duration: Duration(milliseconds: 500),
);

5. 更多自定义选项

custom_route_transition_an 还提供了其他一些自定义选项，比如 curve 参数可以控制动画的曲线，reverseDuration 可以控制反向动画的持续时间等。

return CustomRouteTransition(
  builder: (context) => SecondPage(),
  transitionType: TransitionType.slideRight,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut, // 自定义动画曲线
  reverseDuration: Duration(milliseconds: 300), // 反向动画持续时间
);