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

custom_route_transition_sa 是一个 Flutter 插件，用于实现自定义的路由过渡动画。它允许你为页面之间的导航创建独特的过渡效果，而不是使用 Flutter 默认的过渡动画。以下是使用 custom_route_transition_sa 插件的基本步骤：

1. 添加依赖

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

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

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:custom_route_transition_sa/custom_route_transition_sa.dart';

3. 使用自定义过渡动画

custom_route_transition_sa 插件提供了 CustomRouteTransition 类，你可以使用它来定义自定义的过渡动画。

以下是一个简单的示例，展示如何使用 CustomRouteTransition 实现一个页面从底部滑入的过渡效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Route Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              CustomRouteTransition(
                child: SecondScreen(),
                transitionType: TransitionType.slideUp, // 从底部滑入
                duration: Duration(milliseconds: 500), // 过渡时间
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

4. 过渡动画类型

CustomRouteTransition 提供了多种过渡动画类型，你可以通过 transitionType 参数来指定：

• TransitionType.slideUp: 从底部滑入
• TransitionType.slideDown: 从顶部滑入
• TransitionType.slideLeft: 从右侧滑入
• TransitionType.slideRight: 从左侧滑入
• TransitionType.fade: 淡入淡出
• TransitionType.scale: 缩放
• TransitionType.rotate: 旋转

5. 自定义过渡动画

如果你需要更复杂的过渡动画，你可以自定义 PageRouteBuilder 来实现。CustomRouteTransition 实际上是对 PageRouteBuilder 的封装，你可以直接使用 PageRouteBuilder 来创建更复杂的过渡效果。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(),
    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));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);