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

hero 動畫介紹

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

<center><img width="384px" height="640" src="https://user-gold-cdn.xitu.io/2019/1/27/1688f711e2b6d482?w=1080&h=1920&f=gif&s=3549931"></center>

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：https://github.com/MeandNi

個人博客：https://meandni.com/

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

參考資料：

https://flutter.io/docs/development/ui/animations/hero-animations

https://medium.com/flutter-community/a-deep-dive-into-hero-widgets-in-flutter-d34f441eb026

標題	鏈接
Flutter進階：深入探究 ListView 和 ScrollPhysics	https://juejin.im/post/5c4c202df265da615064ce4b
Flutter進階：深入探究 TextField	https://juejin.im/post/5c4c4e22f265da6174652fb4