Flutter 自定义过渡动画插件 custom_transition 的使用

本说明文件描述了该软件包。如果您将此软件包发布到 pub.dev，那么此说明文件的内容将出现在您的软件包首页。

对于如何编写良好的软件包说明文件，请参阅 编写软件包页面指南。

对于开发软件包的一般信息，请参阅 Dart 指南中的 创建软件包 和 Flutter 指南中的 开发软件包和插件。

文件带有标题

此软件包用于在页面之间实现动画过渡，这是第一个版本，很快将添加其他过渡效果。

CustomAnimatedRoute

CustomAnimatedRoute 是一个 Flutter 软件包，旨在提供多种页面之间的动画过渡。这是第一个版本，未来更新中会添加更多动画效果。

特性

• 滑动动画：
  • leftToRight：从左向右滑动，创建平滑的滑动效果。
  • rightToLeft：从右向左滑动，通常用于屏幕之间的导航。
  • bottomToTop：从底部向上滑动，适合模态或应滑动出现的屏幕。
  • topToBottom：从顶部向下滑动，适用于通过滑动来关闭屏幕。
  • 淡入淡出动画：提供平滑的淡入淡出过渡，适用于内容之间的微妙变化。
  • 缩放动画：创建放大/缩小的效果，在页面过渡时聚焦新屏幕。
  • 旋转动画：在过渡期间旋转页面，增加动态和引人注目的效果。
  • 缩放旋转动画：结合缩放和旋转，提供更复杂且吸引人的过渡效果，非常适合创意界面。
  • 圆形揭示动画：以圆形方式揭示下一个屏幕，常用于突出特定区域或操作。
  • 无动画：直接过渡，没有任何视觉效果，允许即时页面变化。

入门指南

此软件包使用简单，无需任何额外设置。只需将其添加到项目中，并开始使用提供的动画来增强应用程序的用户体验。

要安装该软件包，请在您的 pubspec.yaml 文件中添加以下行：

dependencies:
  custom_animated_route: ^1.0.0

使用示例

我将给出一个示例。

// 您可以添加持续时间或使用任何曲线，所有动画都与曲线一起工作
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: animatedTransition(RouteAnimationType.rotate,),
  ),
);

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => AnotherPage(),
    transitionsBuilder: animatedTransition(
      RouteAnimationType.scaleRotate,
      curve: Curves.bounceInOut,
      secondaryCurve: Curves.easeInOut,
    ),
    transitionDuration: const Duration(milliseconds: 800),
    reverseTransitionDuration: const Duration(milliseconds: 800),
  ),
);  

完整示例

以下是完整的示例代码，展示了如何在 Flutter 应用程序中使用 custom_transition 插件。

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

void main() => runApp(const MyApp());

/// 示例应用
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 此小部件是您的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Animated Route Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/second':
            final RouteAnimationType animationType = settings.arguments as RouteAnimationType;
            return PageRouteBuilder(
              pageBuilder: (context, animation, secondaryAnimation) => const SecondPage(),
              transitionsBuilder: animatedTransition(animationType),
              transitionDuration: const Duration(milliseconds: 300),
              reverseTransitionDuration: const Duration(milliseconds: 300),
            );
          default:
            return null;
        }
      },
      routes: {
        '/': (context) => const HomeScreen(),
      },
    );
  }
}

/// 示例页面
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final Map<RouteAnimationType, String> animationMap = {
      RouteAnimationType.leftToRight: 'Left to Right Transition',
      RouteAnimationType.fade: 'Fade Transition',
      RouteAnimationType.rightToLeft: 'Right to Left Transition',
      RouteAnimationType.bottomToTop: 'Bottom to Top Transition',
      RouteAnimationType.topToBottom: 'Top to Bottom Transition',
      RouteAnimationType.scale: 'Scale Transition',
      RouteAnimationType.zoom: 'Zoom Transition',
      RouteAnimationType.circularReveal: 'Circular Reveal Transition',
      RouteAnimationType.none: 'No Transition',
      RouteAnimationType.rotate: 'Rotate Transition',
      RouteAnimationType.scaleRotate: 'Scale Rotate Transition',
      // 添加其他过渡效果
    };

    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: Expanded(
        child: ListView.builder(
          padding: const EdgeInsets.all(8),
          itemCount: animationMap.length + 2,
          itemBuilder: (context, index) {
            if (index == animationMap.length) {
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 4.0),
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/second',
                      arguments: RouteAnimationType.leftToRight,
                    );
                  },
                  child: const Text('navigate by name'),
                ),
              );
            } else if (index == animationMap.length + 1) {
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 4.0),
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      PageRouteBuilder(
                        pageBuilder: (context, animation, secondaryAnimation) => const SecondPage(),
                        transitionsBuilder: animatedTransition(RouteAnimationType.rotate, curve: Curves.easeInOutBack),
                        transitionDuration: const Duration(milliseconds: 800),
                        reverseTransitionDuration: const Duration(milliseconds: 800),
                      ),
                    );
                  },
                  child: const Text("with curve"),
                ),
              );
            }

            final animationType = animationMap.keys.elementAt(index);
            final animationLabel = animationMap.values.elementAt(index);
            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 4.0),
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    PageRouteBuilder(
                      pageBuilder: (context, animation, secondaryAnimation) => const SecondPage(),
                      transitionsBuilder: animatedTransition(animationType, curve: Curves.linear),
                      transitionDuration: const Duration(milliseconds: 800),
                      reverseTransitionDuration: const Duration(milliseconds: 800),
                    ),
                  );
                },
                child: Text(animationLabel),
              ),
            );
          },
        ),
      ),
    );
  }
}

/// 示例第二个页面
class SecondPage extends StatelessWidget {
  /// 页面标题
  final String? title;

  /// 第二个页面构造函数
  const SecondPage({super.key, this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      backgroundColor: Colors.greenAccent,
      appBar: AppBar(
        title: Text(args.toString()),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text('Second Page'),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Go Third Page'),
            )
          ],
        ),
      ),
    );
  }
}

/// 第三个页面
class ThirdPage extends StatelessWidget {
  /// 页面标题
  final String title;

  /// 第三个页面构造函数
  const ThirdPage({super.key, required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Page Transition Plugin"),
      ),
      body: const Center(
        child: Text('ThirdPage Page'),
      ),
    );
  }
}