## 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已經幫我們做了。
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示