上一篇Flutter 簡單易用的路由管理插件 fluro 簡介介紹了fluro 路由管理的基本使用。在實際應用中,我們常常會對不同的頁面採取不同的轉場動畫,以提高頁面切換過程中的用戶體驗。舉個例子,微信的掃碼後在手機上確認登錄頁面就是從底部彈出的,而大部分頁面的跳轉都是從右向左滑入。通過這種形式區分不同的轉場場景,從而給用戶更多的趣味性以提高用戶體驗。
在 fluro 中,定義路由處理器 Handler
時可以指定該頁面的默認轉場形式,或者在使用 navigateTo
方法是可以設置頁面跳轉transition
參數來設定個性化的轉場形式。本篇演示了fluro 內置的轉場動畫,效果如下圖所示。
轉場形式
fluro 的轉場形式通過 TransitionType枚舉定義,如下所示:
enum TransitionType {
native, //原生形式,和原生的保持一致,默認
nativeModal, //原生模態跳轉
inFromLeft, //從左滑入
inFromTop, //從頂部滑入
inFromRight, //從右滑入
inFromBottom,//從底部滑入
fadeIn, //漸現
custom, //自定義,需要配合 transitionBuilder 使用
material, //安卓風格跳轉
materialFullScreenDialog, //安卓風格全屏對話框(左上角帶有關閉按鈕)
cupertino, //iOS 風格跳轉
cupertinoFullScreenDialog,//iOS風格全屏對話框(左上角帶有關閉按鈕)
none, //無轉場動畫
}
設定頁面默認轉場方式
在定義 Handler
時,可以指定轉場動畫的 transition
,如下所示:
//...
router.define(transitionPath,
handler: transitionHandler,
transitionType: TransitionType.inFromBottom);
//...
這個時候,如果在 navigateTo
方法沒有指定轉場動畫,則會使用路由預先定義的方式進行轉場。
跳轉時指定轉場方式
FluroRouter
的 navigateTo
方法可以顯示指定 轉場動畫類型,只需要在 transition
參數指定對應的枚舉值即可,示例代碼如下:
RouterManager.router.navigateTo(
context, RouterManager.transitionPath,
transition: TransitionType.inFromRight);
如果想要控制轉場動畫的時間,可以設置transitionDuration
參數,transitionDuration
是一個 Duration
對象。考慮用戶等待時間和體驗,一般轉場動畫建議在200-300毫秒之間。示例代碼如下:
RouterManager.router.navigateTo(
context, RouterManager.transitionPath,
transition: TransitionType.fadeIn,
transitionDuration: Duration(milliseconds: 1000));
總結
可以看到,fluro 自身提供的預設動畫已經能夠滿足絕大多數場景的使用了,建議是如果頁面的出現形式是固定的,可以在定義路由時指定,從而避免每一處跳轉都需要設定 transition
參數。如果還需要其他轉場動畫,可以使用 transitionBuilder
來構建,下一篇我們介紹如何構建自定義的轉場動畫。