Flutter 使用 fluro 的转场动画提高页面跳转切换体验

Flutter 使用 fluro 的转场动画提高页面跳转切换体验,第1张

上一篇Flutter 简单实用的 fluro 路由管理插件简介介绍了fluro 路由管理的基本使用。在实际应用中,我们常常会对不同的页面采取不同的转场动画,以提高页面切换过程中的用户体验。举个例子,微信的扫码后在手机上确认登录页面就是从底部d出的,而大部分页面的跳转都是从右向左滑入。通过这种形式区分不同的转场场景,从而给用户更多的趣味性以提高用户体验。

在 fluro 中,定义路由处理器 Handler 时可以指定该页面的默认转场形式,或者在使用 navigateTo 方法是可以设置页面跳转transition参数来设定个性化的转场形式。本篇演示了fluro 内置的转场动画,效果如下图所示。

转场形式

fluro 的转场形式通过 TransitionType枚举定义,如下所示:

enum TransitionType {
  native, //原生形式,和原生的保持一致,默认
  nativeModal, //原生模态跳转
  inFromLeft,  //从左滑入
  inFromTop,   //从顶部滑入
  inFromRight, //从右滑入
  inFromBottom,//从底部滑入
  fadeIn,      //渐现
  custom,      //自定义,需要配合 transitionBuilder 使用

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/997076.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存