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

要在 Flutter 中使用自定义路由过渡动画插件 custom_route_transition_dira，首先需要确保你已经将该插件添加到你的 pubspec.yaml 文件中。假设你已经安装了这个插件，接下来我将介绍如何使用它来实现自定义路由过渡动画。

1. 安装插件

在 pubspec.yaml 文件中添加依赖：

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

然后运行 flutter pub get 来安装插件。

2. 导入插件

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

import 'package:custom_route_transition_dira/custom_route_transition_dira.dart';

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

假设你已经定义了一个新的页面 SecondPage，你可以使用 CustomRouteTransition 来实现自定义的路由过渡动画。

import 'package:flutter/material.dart';
import 'package:custom_route_transition_dira/custom_route_transition_dira.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: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              CustomRouteTransition(
                child: SecondPage(),
                transitionType: TransitionType.slideLeft, // 自定义过渡动画类型
                duration: Duration(milliseconds: 500), // 动画持续时间
              ),
            );
          },
          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 参数来选择不同的动画效果。例如：

• TransitionType.slideLeft：从右向左滑动
• TransitionType.slideRight：从左向右滑动
• TransitionType.slideUp：从下向上滑动
• TransitionType.slideDown：从上向下滑动
• TransitionType.scale：缩放过渡
• TransitionType.rotate：旋转过渡
• TransitionType.fade：淡入淡出过渡

你也可以通过 duration 参数来控制动画的持续时间。

5. 自定义动画

如果你想要实现更复杂的自定义动画，你可以继承 CustomRouteTransition 并重写 buildTransitions 方法。例如：

class MyCustomTransition extends CustomRouteTransition {
  MyCustomTransition({required Widget child, Duration duration = const Duration(milliseconds: 300)})
      : super(child: child, duration: duration);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return ScaleTransition(
      scale: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(parent: animation, curve: Curves.easeInOut)),
      child: child,
    );
  }
}

然后在 Navigator.push 中使用 MyCustomTransition：

Navigator.push(
  context,
  MyCustomTransition(
    child: SecondPage(),
    duration: Duration(milliseconds: 500),
  ),
);