Flutter页面过渡动画插件animate_navigator_transition_do的使用

animate_navigator_transition_do 是一个 Flutter 插件，用于在页面导航时添加自定义的过渡动画。它允许开发者轻松地定义页面之间的过渡效果，而不需要手动处理复杂的动画逻辑。以下是如何使用这个插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入包

在你的 Dart 文件中导入 animate_navigator_transition_do 包：

import 'package:animate_navigator_transition_do/animate_navigator_transition_do.dart';

3. 使用 AnimateNavigatorTransitionDo

你可以使用 AnimateNavigatorTransitionDo 来包装你的页面导航逻辑，并指定过渡动画。

基本用法

假设你有两个页面：PageA 和 PageB。你可以在从 PageA 导航到 PageB 时使用 AnimateNavigatorTransitionDo 来添加过渡动画。

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page A')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AnimateNavigatorTransitionDo.push(
              context,
              PageB(),
              transitionType: TransitionType.slideRight,
            );
          },
          child: Text('Go to Page B'),
        ),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page B')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back to Page A'),
        ),
      ),
    );
  }
}

支持的过渡类型

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

• TransitionType.slideRight
• TransitionType.slideLeft
• TransitionType.slideUp
• TransitionType.slideDown
• TransitionType.fade
• TransitionType.scale
• TransitionType.rotation
• TransitionType.custom (自定义动画)

自定义动画

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

AnimateNavigatorTransitionDo.push(
  context,
  PageB(),
  transitionType: TransitionType.custom,
  customTransition: (context, animation, secondaryAnimation, child) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(1.0, 0.0),
        end: Offset.zero,
      ).animate(CurvedAnimation(
        parent: animation,
        curve: Curves.easeInOut,
      )),
      child: child,
    );
  },
);

4. 处理返回动画

默认情况下，返回动画会自动与进入动画相反。如果你想要自定义返回动画，可以在 AnimateNavigatorTransitionDo.pop 中指定 transitionType：

AnimateNavigatorTransitionDo.pop(
  context,
  transitionType: TransitionType.slideLeft,
);

5. 完整示例

以下是一个完整的示例，展示了如何在两个页面之间使用 AnimateNavigatorTransitionDo 进行导航：

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

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

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

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page A')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AnimateNavigatorTransitionDo.push(
              context,
              PageB(),
              transitionType: TransitionType.slideRight,
            );
          },
          child: Text('Go to Page B'),
        ),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page B')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AnimateNavigatorTransitionDo.pop(
              context,
              transitionType: TransitionType.slideLeft,
            );
          },
          child: Text('Go back to Page A'),
        ),
      ),
    );
  }
}

6. 其他功能

animate_navigator_transition_do 还支持其他功能，比如设置动画持续时间、曲线等。你可以通过 duration 和 curve 参数来自定义这些属性：

AnimateNavigatorTransitionDo.push(
  context,
  PageB(),
  transitionType: TransitionType.slideRight,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);