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

flutter_transitions 是一个用于在 Flutter 中实现页面过渡动画的插件。它提供了多种内置的过渡效果，可以帮助你轻松地在页面之间添加动画效果。以下是如何使用 flutter_transitions 插件的步骤：

1. 添加依赖

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

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

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

2. 导入包

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

import 'package:flutter_transitions/flutter_transitions.dart';

3. 使用过渡动画

flutter_transitions 提供了多种过渡动画，例如 SlideTransition、ScaleTransition、RotationTransition 等。你可以使用这些过渡动画来包装你的页面。

以下是一个简单的例子，展示了如何在页面之间使用 SlideTransition：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      routes: {
        '/second': (context) => SecondPage(),
      },
    );
  }
}

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,
              SlideTransitionRoute(
                builder: (context) => 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'),
        ),
      ),
    );
  }
}

4. 自定义过渡动画

你还可以通过继承 TransitionRoute 或 PageRoute 来创建自定义的过渡动画。以下是一个自定义过渡动画的例子：

class CustomTransitionRoute extends PageRouteBuilder {
  final Widget page;

  CustomTransitionRoute({required this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              ScaleTransition(
            scale: Tween<double>(
              begin: 0.0,
              end: 1.0,
            ).animate(
              CurvedAnimation(
                parent: animation,
                curve: Curves.fastOutSlowIn,
              ),
            ),
            child: child,
          ),
        );
}

// 使用自定义过渡动画
Navigator.push(
  context,
  CustomTransitionRoute(page: SecondPage()),
);

5. 其他过渡效果

flutter_transitions 还提供了其他过渡效果，例如 FadeTransition、RotationTransition 等。你可以根据需求选择合适的过渡效果。

6. 动画参数调整

你可以通过调整动画的持续时间、曲线等参数来进一步定制过渡效果。例如：

SlideTransitionRoute(
  builder: (context) => SecondPage(),
  direction: SlideDirection.left,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);