## Hero動畫 Hero指的是可以在路由(頁面)之間“飛行”的widget，簡單來說Hero動畫就是在路由切換時，有一個共享的Widget可以在新舊路由間切換，由于共享的Widget在新舊路由頁面上的位置、外觀可能有所差異，所以在路由切換時會逐漸過渡，這樣就會產生一個Hero動畫。 你可能多次看到過 hero 動畫。例如，一個路由中顯示待售商品的縮略圖列表，選擇一個條目會將其跳轉到一個新路由，新路由中包含該商品的詳細信息和“購買”按鈕。 在Flutter中將圖片從一個路由“飛”到另一個路由稱為**hero動畫**，盡管相同的動作有時也稱為 **共享元素轉換**。下面我們通過一個示例來體驗一下hero 動畫。 #### 示例 假設有兩個路由A和B，他們的內容交互如下： A：包含一個用戶頭像，圓形，點擊后跳到B路由，可以查看大圖。 B：顯示用戶頭像原圖，矩形； 在AB兩個路由之間跳轉的時候，用戶頭像會逐漸過渡到目標路由頁的頭像上，接下來我們先看看代碼，然后再解析： ``` // 路由A class HeroAnimationRoute extends StatelessWidget { @override Widget build(BuildContext context) { return Container( alignment: Alignment.topCenter, child: InkWell( child: Hero( tag: "avatar", //唯一標記，前后兩個路由頁Hero的tag必須相同 child: ClipOval( child: Image.asset("images/avatar.png", width: 50.0, ), ), ), onTap: () { //打開B路由 Navigator.push(context, PageRouteBuilder( pageBuilder: (BuildContext context, Animation animation, Animation secondaryAnimation) { return new FadeTransition( opacity: animation, child: PageScaffold( title: "原圖", body: HeroAnimationRouteB(), ), ); }) ); }, ), ); } } ``` 路由B: ``` class HeroAnimationRouteB extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Hero( tag: "avatar", //唯一標記，前后兩個路由頁Hero的tag必須相同 child: Image.asset("images/avatar.png")， ), ); } } ``` 我們可以看到，實現Hero動畫只需要用Hero Widget將要共享的Widget包裝起來，并提供一個相同的tag即可，中間的過渡幀都是Flutter Framework自動完成的。必須要注意， 前后路由頁的共享Hero的tag必須是相同的，Flutter Framework內部正式通過tag來對應新舊路由頁Widget的對應關系的。 Hero動畫的原理比較簡單，Flutter Framework知道新舊路由頁中共享元素的位置和大小，所以根據這兩個端點，在動畫執行過程中求出過渡時的插值即可，幸運的是，這些事情Flutter已經幫我們做了。