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進階：深入探究 ListView 和 ScrollPhysics | juejin.im/post/5c4c20… |
| Flutter進階：深入探究 TextField | juejin.im/post/5c4c4e… |