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')),
         ],
       ),
     ),
   );
 }
}

输出:

来源：https://blog.csdn.net/weixin_42320543/article/details/124333291