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

发布于 1周前 作者 yuanlaile 来自 Flutter

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

使用说明

通过使用page_animation_transition插件，您可以为您的应用程序添加漂亮的页面过渡效果。它非常易于使用！您只需要确保在Flutter项目中将page_animation_transition作为依赖项添加。

添加依赖

在项目的pubspec.yaml文件中添加如下依赖：

dependencies:
  page_animation_transition: ^latest_version

然后运行flutter pub get以获取并安装这个包。

示例代码

以下是一些使用示例：

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomToTopTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: TopToBottomTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RightToLeftTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: LeftToRightTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: FadeAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: ScaleAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RotationAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: TopToBottomFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomToTopFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RightToLeftFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: LeftToRightFadedTransition()));

预定义路由的使用方法

首先，在MaterialApp widget中定义onGenerateRoute属性，如下所示，并在switch case中转换到新的路由：

onGenerateRoute: (settings) {
  switch (settings.name) {
    case '/pageTwo':
      return PageAnimationTransition(child: PageTwo(), pageAnimationType: LeftToRightFadedTransition());
    default:
      return null;
  }
}

之后，可以像这样使用新路由：

Navigator.pushNamed(context, '/pageTwo');

过渡类型

  • bottomToTop
  • topToBottom
  • leftToRight
  • rightToLeft
  • fadeAnimation
  • scaleAnimation
  • rotateAnimation
  • topToBottomFaded
  • bottomToTopFaded
  • leftToRightFaded
  • rightToLeftFaded

完整的示例Demo

下面是一个完整的示例demo，包含两个页面之间的切换和动画过渡效果。

main.dart

import 'package:flutter/material.dart';
import 'package:page_animation_transition/page_animation_transition.dart';
import 'page_one.dart';
import 'page_two.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Page Animation Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PageOne(),
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/pageTwo':
            return PageAnimationTransition(
              child: const PageTwo(),
              pageAnimationType: LeftToRightFadedTransition(),
            );
          default:
            return null;
        }
      },
    );
  }
}

page_one.dart

import 'package:flutter/material.dart';

class PageOne extends StatelessWidget {
  const PageOne({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page One'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/pageTwo');
          },
          child: const Text('Go to Page Two'),
        ),
      ),
    );
  }
}

page_two.dart

import 'package:flutter/material.dart';

class PageTwo extends StatelessWidget {
  const PageTwo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page Two'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

通过上述代码，我们创建了一个简单的Flutter应用，其中包含两个页面：PageOne和PageTwo。点击PageOne上的按钮会触发一个带有左侧淡入动画过渡效果的导航到PageTwo，而点击PageTwo上的按钮则返回到PageOne。


更多关于Flutter页面动画过渡插件page_animation_transition的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter页面动画过渡插件page_animation_transition的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用page_animation_transition插件来实现页面动画过渡的一个代码示例。这个插件允许开发者在Flutter应用中自定义页面之间的过渡动画。

首先，确保你已经在pubspec.yaml文件中添加了page_animation_transition依赖：

dependencies:
  flutter:
    sdk: flutter
  page_animation_transition: ^x.y.z  # 请替换为最新版本号

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

接下来，让我们创建一个简单的Flutter应用，其中包含两个页面，并使用PageAnimationTransition来实现它们之间的动画过渡。

主文件：main.dart

import 'package:flutter/material.dart';
import 'package:page_animation_transition/page_animation_transition.dart';
import 'page_two.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Page Animation Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

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,
              PageAnimationTransition(
                child: PageTwo(),
                animationType: PageAnimationType.slideFromRight, // 这里可以更换为其他动画类型
                duration: Duration(milliseconds: 500),
              ),
            );
          },
          child: Text('Go to Page Two'),
        ),
      ),
    );
  }
}

第二个页面：page_two.dart

import 'package:flutter/material.dart';

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Two'),
      ),
      body: Center(
        child: Text('Welcome to Page Two!'),
      ),
    );
  }
}

动画类型

PageAnimationType 枚举提供了多种内置的动画类型，例如：

  • PageAnimationType.fade
  • PageAnimationType.slideFromLeft
  • PageAnimationType.slideFromRight
  • PageAnimationType.slideFromTop
  • PageAnimationType.slideFromBottom
  • PageAnimationType.scale
  • PageAnimationType.rotate

你可以根据需要选择适合的动画类型。

自定义动画

如果你需要更复杂的动画效果，PageAnimationTransition还允许你自定义动画。你可以通过传递一个自定义的AnimationController和一个Animation<double>来实现这一点。

这是一个简单的例子，展示如何自定义动画：

import 'package:flutter/material.dart';
import 'package:page_animation_transition/page_animation_transition.dart';
import 'page_two.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageAnimationTransition(
                child: PageTwo(),
                animation: _animation,
                animationCurve: Curves.easeInOut,
                // 自定义动画类型，需要传递 Animation<double> 对象
              ),
            );
          },
          child: Text('Go to Page Two with Custom Animation'),
        ),
      ),
    );
  }
}

注意，在上面的自定义动画示例中，我们传递了一个Animation<double>对象给PageAnimationTransition的animation参数。这允许你完全控制动画的行为。

希望这个示例能帮助你理解如何在Flutter项目中使用page_animation_transition插件来实现页面动画过渡。

回到顶部