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

custom_route_transitions_nan 是一个用于 Flutter 的自定义路由过渡动画插件，它允许你为页面之间的导航添加自定义的过渡效果。这个插件提供了多种内置的过渡动画，同时你也可以根据需要自定义过渡效果。

1. 安装插件

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

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

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

2. 基本使用

2.1 使用内置过渡动画

custom_route_transitions_nan 提供了多种内置的过渡动画，比如 FadeRoute、ScaleRoute、SlideRoute、RotationRoute 等。

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

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              SlideRoute(
                child: SecondPage(),
                direction: SlideDirection.left, // 从左向右滑动
              ),
            );
          },
          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'),
        ),
      ),
    );
  }
}

2.2 自定义过渡动画

如果你想自定义过渡动画，可以使用 CustomRoute，并提供一个 PageRouteBuilder。

Navigator.push(
  context,
  CustomRoute(
    child: SecondPage(),
    transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

3. 内置过渡动画列表

custom_route_transitions_nan 提供的内置过渡动画包括：

• FadeRoute: 淡入淡出效果。
• ScaleRoute: 缩放效果。
• SlideRoute: 滑动效果（可以指定方向）。
• RotationRoute: 旋转效果。
• SizeRoute: 大小变化效果。

4. 参数说明

• child: 要导航到的目标页面。
• duration: 过渡动画的持续时间。
• curve: 过渡动画的曲线。
• direction: 对于 SlideRoute，可以指定滑动的方向（SlideDirection.left, SlideDirection.right, SlideDirection.top, SlideDirection.bottom）。

5. 自定义更多效果

你可以通过 transitionBuilder 参数来实现更复杂的自定义过渡动画。例如，结合多个动画效果：

Navigator.push(
  context,
  CustomRoute(
    child: SecondPage(),
    transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: Offset(1.0, 0.0),
          end: Offset.zero,
        ).animate(CurvedAnimation(parent: animation, curve: Curves.easeInOut)),
        child: FadeTransition(
          opacity: animation,
          child: child,
        ),
      );
    },
  ),
);