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

TransitionEasy 是一个 Flutter 库，它简化了实现自定义页面和对话框过渡动画的过程。它提供了一个易于使用的 API 来创建各种过渡动画，使你在 Flutter 应用中添加吸引人的视觉效果变得更加方便。

特性

• 轻松创建自定义页面和对话框过渡动画。
• 支持多种过渡类型，如滑动、淡入、旋转、缩放、弹跳等。
• 灵活且可重用的 API，可以设置自定义持续时间和缓动曲线。
• 可以无缝地将过渡动画集成到你的 Flutter 应用中。

开始使用

安装

要在你的 Flutter 项目中使用 TransitionEasy，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  transition_easy: ^1.0.8

然后，在终端中运行 flutter pub get 来获取包。

使用

1. 导入必要的包：

import 'package:flutter/material.dart';
import 'package:transition_easy/easy_transition.dart';

1. 将根小部件包装在 MaterialApp 或 CupertinoApp 中，并使用 TransitionEasy 类来处理带有自定义过渡的导航。例如：

import 'package:transition_easy/easy_fade_in_transition.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的应用',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TransitionEasy 示例')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            TransitionEasy(
              child: const NextPage(),
              customTransitionModule: EasyFadeInTransition(),
            ).dynamicNavigation(context);
          },
          child: const Text('下一页'),
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  const NextPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('下一页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            TransitionEasy(
              child: const DialogScreen(),
              customTransitionModule: EasyFadeInTransition(),
            ).dynamicNavigation(context, isDialog: true);
          },
          child: const Text('显示对话框'),
        ),
      ),
    );
  }
}

class DialogScreen extends StatelessWidget {
  const DialogScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Container(
        padding: const EdgeInsets.all(16),
        child: const Text('这是一个自定义对话框。'),
      ),
    );
  }
}

在这个示例中，我们使用了 EasyFadeInTransition 自定义过渡模块来为页面和对话框添加淡入动画。你可以轻松切换到 TransitionEasy 提供的其他自定义过渡模块来尝试不同的动画效果。

CustomTransitionModule 参考

PageRoute buildPageRoute(Widget child, Duration duration, Curve curve)

• child: 在过渡过程中显示的内容。
• duration: 过渡动画的总持续时间。
• curve: 过渡动画的缓动曲线。

覆盖此方法以定义页面路由的自定义过渡动画。

Route buildDialogRoute(Widget child, Duration duration, Curve curve, BuildContext context)

• context: 当前构建上下文。
• child: 在过渡过程中显示的内容。
• duration: 过渡动画的总持续时间。
• curve: 过渡动画的缓动曲线。

覆盖此方法以定义对话框路由的自定义过渡动画。

支持的过渡模块

• EasyFadeInTransition: 页面和对话框的淡入动画。
• EasySlideLeftTransition: 页面的向左滑动动画。
• EasySlideRightTransition: 页面的向右滑动动画。
• EasySlideTopTransition: 页面的向上滑动动画。
• EasySlideBottomTransition: 页面的向下滑动动画。
• EasySlideDiagonalTransition: 页面的对角线滑动动画。
• EasyRotateTransition: 页面的旋转动画。
• EasyRotateScaleTransition: 页面的旋转缩放动画。
• EasyBounceTransition: 页面的弹跳动画。
• EasyZigZagTransition: 页面的锯齿形动画。
• EasyCustomPathTransition: 页面的自定义路径动画。

反馈和贡献

我们欢迎来自社区的反馈、错误报告和贡献！如果你遇到任何问题或有任何改进建议，请随时在我们的 GitHub 仓库上提交问题或拉取请求。

许可证

TransitionEasy 在 MIT 许可证下发布。更多详细信息请参阅 LICENSE 文件。