Flutter添加页面过渡动画实现步骤

更新时间：2022年05月16日 17:27:27 作者：会煮咖啡的猫咪

这篇文章主要为大家介绍了Flutter添加页面过渡动画，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

大家好，在这篇文章中，我们将学习如何添加动画，同时从一个页面到其他在 Flutter。我们将覆盖不同类型的动画和实现基本动画 Flutter 使用包页动画过渡。

动画在提升用户体验方面起着至关重要的作用，但动画到底是什么呢？

设计语言，例如 Material，定义了在路线(或屏幕)之间转换时的标准行为。不过，有时候，自定义屏幕之间的转换可以使应用程序更加独特。

在本教程中，我们将使用包页面 page_animation_transition 来简化在页面上添加转换。

使用插件探索不同的转换

步骤 1: 在 pubspec.yaml 中添加页面动画转换

page_animation_transition

步骤 2: 在 PageOne 上导入库

假设您正在从 PageOne 过渡到 PageTwo

以下是图书馆支持的动画类型:

BottomToTopTransition TopToBottomTransition 底到上转换到底转换

RightToLeftTransition 右转移

LeftToRightTransition 左/右转变

FadeAnimationTransition 淡化动画/转换

ScaleAnimationTransition 标量动画/转换

RotationAnimationTransition 转动/动画/转变

TopToBottomFadedTransition 上到下到过渡

BottomToTopFadedTransition 底部/上部/下部/上部/下部/上部/下部/上部/下部/上部/下部/上部/

RightToLeftFadedTransition 右转到/ftfaded/transition

LeftToRightFadedTransition 左/右/插入/转换

步骤3.添加以下导航代码行

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

对于预定义的路由:

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

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

Pushnamed (context,’/pageTwo’) ;

Output:

输出:

其他类型转换的完整代码:

import 'package:page_animation_transition/animations/bottom_to_top_faded_transition.dart';
import 'package:page_animation_transition/animations/bottom_to_top_transition.dart';
import 'package:page_animation_transition/animations/fade_animation_transition.dart';
import 'package:page_animation_transition/animations/left_to_right_faded_transition.dart';
import 'package:page_animation_transition/animations/left_to_right_transition.dart';
import 'package:page_animation_transition/animations/right_to_left_faded_transition.dart';
import 'package:page_animation_transition/animations/right_to_left_transition.dart';
import 'package:page_animation_transition/animations/rotate_animation_transition.dart';
import 'package:page_animation_transition/animations/scale_animation_transition.dart';
import 'package:page_animation_transition/animations/top_to_bottom_faded.dart';
import 'package:page_animation_transition/animations/top_to_bottom_transition.dart';
import 'package:page_animation_transition/page_animation_transition.dart';
import 'page_two.dart';
import 'package:flutter/material.dart';class PageOne extends StatelessWidget {
  const PageOne({Key? key}) : super(key: key);[@override](http://twitter.com/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page Animation Transition'),
        centerTitle: true,
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: BottomToTopTransition()));
                },
                child: const Text('Bottom To Top')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: TopToBottomTransition()));
                },
                child: const Text('Top to bottom')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: RightToLeftTransition()));
                },
                child: const Text('Right To Left')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: LeftToRightTransition()));
                },
                child: const Text('Left to Right')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: FadeAnimationTransition()));
                },
                child: const Text('Faded')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: ScaleAnimationTransition()));
                },
                child: const Text('Scale')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: RotationAnimationTransition()));
                },
                child: const Text('Rotate')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: TopToBottomFadedTransition()));
                },
                child: const Text('Top to Bottom Faded')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: BottomToTopFadedTransition()));
                },
                child: const Text('Bottom to Top Faded')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: RightToLeftFadedTransition()));
                },
                child: const Text('Right to Left Faded')),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(PageAnimationTransition(
                      page: const PageTwo(),
                      pageAnimationType: LeftToRightFadedTransition()));
                },
                child: const Text('Left to Right Faded')),
          ],
        ),
      ),
    );
  }
}

输出:

总结

希望这个博客能帮助你深入了解 Flutter 的转变。谢谢阅读，更多关于Flutter页面过渡动画的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Android开发之组件GridView简单使用方法示例
这篇文章主要介绍了Android开发之组件GridView简单使用方法,涉及Android GridView组件图片浏览及保存图片等相关操作技巧,需要的朋友可以参考下
2019-03-03
Android中webview与JS交互、互调方法实例详解
这篇文章主要介绍了Android中webview与JS交互、互调方法实例详解的相关资料,需要的朋友可以参考下
2017-03-03
android读取assets中Excel表格并显示
这篇文章主要为大家详细介绍了android读取assets中Excel表格并显示的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
Android下拉刷新PtrFrameLayout的使用实例代码
本篇文章主要介绍了Android下拉刷新PtrFrameLayout的使用实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Android RecyclerView实现吸顶动态效果流程分析
RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法
2022-12-12
android加载系统相册图片并显示详解
大家好，本篇文章主要讲的是android加载系统相册图片并显示详解，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下，方便下次浏览
2021-12-12
RxJava 2.x新特性总结整理
这篇文章主要介绍了RxJava 2.x新特性的相关资料，文中通过图文及示例代码介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03
Android滑动冲突的完美解决方案
在Android开发中滑动冲突可以说是比较常见的一类问题，也是比较让人头疼的一类问题，两个原本完美的控件，组合在一起之后，忽然发现整个世界都不好了。滑动冲突主要分为同方向滑动冲突和不同方向滑动冲突，下面本文将详细说明两种滑动冲突如何解决。
2016-08-08
ProxyWidget和Element更新的正确方式详解
这篇文章主要为大家介绍了ProxyWidget和Element更新的正确方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
Android 如何保证service在后台不被kill
本文主要介绍了Android 如何保证service在后台不被kill的方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02