原文
https://medium.com/@aayushked...
参考
- https://pub.dev/packages/page...
注释
大家好，在这篇文章中，咱们将学习如何增加动画，同时从一个页面到其余在 Flutter。咱们将笼罩不同类型的动画和实现根本动画 Flutter 应用包页动画过渡。
page_animation_transition
引言
动画在晋升用户体验方面起着至关重要的作用，但动画到底是什么呢？
设计语言，例如 Material，定义了在路线(或屏幕)之间转换时的规范行为。不过，有时候，自定义屏幕之间的转换能够使应用程序更加独特。
在本教程中，咱们将应用包页面 page_animation_transition 来简化在页面上增加转换。
应用插件摸索不同的转换
第一步: 在 pubspec.yaml 中增加页面动画转换
page_animation_transition
步骤 2: 在 PageOne 上导入库
假如您正在从 PageOne 过渡到 PageTwo
以下是图书馆反对的动画类型:
_BottomToTopTransition
TopToBottomTransition
RightToLeftTransition
LeftToRightTransition
FadeAnimationTransition
ScaleAnimationTransition
RotationAnimationTransition
TopToBottomFadedTransition
BottomToTopFadedTransition
RightToLeftFadedTransition
LeftToRightFadedTransition_底到上转换到底转换
右转移
左/右转变
淡化动画/转换
标量动画/转换
转动/动画/转变
上到下到过渡
底部/上部/下部/上部/下部/上部/下部/上部/下部/上部/下部/上部/
右转到/ftfaded/transition
左/右/插入/转换
步骤 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 的转变。谢谢浏览！如果有任何谬误，请在评论中让我晓得，这样我能够改良。如果这个博客对你有帮忙，就鼓掌吧！
© 猫哥
- 微信 ducafecat
- 博客 ducafecat.tech
- github
- bilibili