Flutter進階：在應用中實現 Hero(飛行) 動畫

hero 動畫介紹

Hero 指的是能夠在路由(頁面)之間「飛行」的 widget，從一個頁面打開另外一個頁面時產生一個簡單的過渡動畫，看下圖實例：

Hero Animations 採用相似圖標的 widget ，稱爲「hero」，一旦觸發頁面過渡，例如單擊圖標，hero 將會「飛」到下一頁。 當用戶導航回到上一頁面時，也將實現原路返回的動畫。

更多介紹，請看官網。

這裏咱們不只學習如何使用 hero 動畫，也將會自定義一些咱們本身實現的動畫。

構建一個普通的 hero 動畫

hero 動畫容許咱們在 Flutter 中用最簡單的方式實現漂亮動畫，無需太多設置。 在上面的例子中，咱們能夠看到兩個頁面上都存在相同的圖標或者圖片。 咱們須要作的只是 讓這二者以某種方式相關聯。

要實現它，咱們能夠經過在 Hero 組件中包含圖標之類的組件。

Hero(
  tag: "DemoTag",
  child: Icon(
    Icons.add,
    size: 70.0,
  ),
),
複製代碼

咱們須要設置了一個 tag 參數，給這個 hero 一個獨立的名字（類比 Android 中的 ID），由於若是咱們在同一頁面上有多個 hero ，每一個 hero 都須要知道它們將飛往何處且在各不相同的地方。

如今應用程序有一個 hero 組件想要飛到下一頁。接下來就是要告訴它將要飛向何處。

咱們僅須要在第二頁上添加帶有相同標籤的Hero小部件就可實現這個效果。

Hero(
  tag: "DemoTag",
  child: Icon(
    Icons.add,
    size: 150.0,
  ),
),
複製代碼

實例以下：

自定義 hero 動畫

Hero 組件容許咱們自定義各類過渡效果。 有如下幾種方法。

添加佔位符

在組件飛離它曾經處於的位置而且到達目標位置以前，目標處有一處空的地方。 咱們能夠在此位置添加佔位符。

咱們如今使用 CircularProgressIndicator 做爲佔位符。

Hero(
    tag: "DemoTag",
    child: Icon(
      Icons.add,
      size: 150.0,
    ),
    placeholderBuilder: (context, widget) {
      return Container(
        height: 150.0,
        width: 150.0,
        child: CircularProgressIndicator(),
      );
    },
  ),
複製代碼

咱們使用 placeholderBuilder 來構造佔位符並返回咱們但願做爲佔位符的組件。

使用佔位符：

更改 hero 組件

Flutter 容許咱們更改從一個頁面飛到另外一個頁面過程的組件，而無需更改兩個頁面上的組件。

讓咱們在不更改 hero 組件的子組件的前提下，使用火箭圖標「飛」而不是 「+」 圖標 。

咱們使用 flightShuttleBuilder 參數執行此操做。

Hero(
  tag: "DemoTag",
  child: Icon(
    Icons.add,
    size: 150.0,
  ),
  flightShuttleBuilder: (flightContext, animation, direction,
      fromContext, toContext) {
    return Icon(FontAwesomeIcons.rocket, size: 150.0,);
  },
),
複製代碼

flightShuttleBuilder 有5個參數，用來設置動畫以及動畫的方向。

目前，兩個方向的火箭圖標大小都保持在 150.0 。 經過使用方法的 direction 參數，咱們能夠爲每一個方向配置不一樣的配置。

if(direction == HeroFlightDirection.push) {
  return Icon(
    FontAwesomeIcons.rocket,
    size: 150.0,
  );
} else if (direction == HeroFlightDirection.pop){
  return Icon(
    FontAwesomeIcons.rocket,
    size: 70.0,
  );
}
複製代碼

使 hero 動畫能夠支持 iOS 返回滑動手勢

默認狀況下，當在 iOS 上按後退按鈕時，hero 動畫會有效果，但它們在手勢滑動時並無。

使用返回按鈕：

使用滑動手勢

要解決此問題，只需在兩個 Hero 組件上將 transitionOnUserGestures 設置爲 true 便可。 默認狀況下這裏是 false。

Hero(
  tag: "DemoTag",
  child: Icon(
    Icons.add,
  ),
  transitionOnUserGestures: true,
),

複製代碼

效果以下：

最後

利用時間整理分析本身所學的知識是件很是有意義的事情，但願這也能幫到其餘正在學習的同窗。同時我也正在用Flutter寫幾個項目，寫好以後就會開源給你們。

Github：github.com/MeandNi

我的博客：meandni.com/

歡迎一塊兒交流移動開發的技術！

參考資料：

flutter.io/docs/develo…

medium.com/flutter-com…

標題	連接
Flutter進階：深刻探究 ListView 和 ScrollPhysics	juejin.im/post/5c4c20…
Flutter進階：深刻探究 TextField	juejin.im/post/5c4c4e…