今天要來認識英雄了！了解Hero背後是怎麼運作的，可能跟你原本的想像不一樣喔～

Hero其實是製造出一個假象，使用者以為是同一個物件在做動畫變化，但其實不是。Flutter Hero是用兩個不同Route但長得一樣的物件，在中間計算補間動畫。

我們可以想像三個畫面，Source(來源)、Overlay、Destination(目標)，Hero物件等下會在這三個畫面中運作：

首先，動畫開始之前，Hero會在Source等待動畫開始的時刻。

當Hero被觸發動畫時，Flutter會開始執行：

• 計算目標路徑，得知Hero的結局。然後Flutter會把Destination Hero放到Overlay上，並且讓他和Source Hero的位置、大小一樣
• 改變Hero的z-index，讓他維持在最上層
• 將Source Hero移出畫面

當動畫運行時，Hero會用Tween <Rect>設置動畫，Flutter預設是對Source及Dest. Hero矩形的相對角進行動畫處理。

動畫結束後，Dest. Hero會從Overlay移至Destination的目標位置，Overlay會被清空，Source Hero也會恢復原狀。

Hero必要的Widget

• Hero
  定義兩個Hero，一個在Source route裡，一個在Destination route，並設定將二者配對起來的tag標籤名稱。Flutter會用這個tag為成對的Hero設置動畫。
• Inkwell
  定義點擊Hero會做什麼事，用onTap()建立route將他推送至Navigator。
• Navigator
  用來管理routes，Navigator會push或pop一個路線來觸發Hero換場動畫。
• Route
  定義屏幕或是頁面，通常一個App會有多個routes。

研究了Hero animations後才發現其實他很複雜Orz，我花了很多時間去看官方的文件，也要花了很多時間去看他的Code，所以明天再來分享實作的部分