文章目錄

• ?、Hero 動畫簡介
• 一、創建 Hero 動畫核心組件
• 二、創建源頁面
• 三、創建目的頁面
• 四、頁面跳轉
• 五、完整代碼示例
• 六、相關資源

?、Hero 動畫簡介

---

Hero Widget 動畫效果 : Hero 通過動畫從 源界面 運動到 目標界面 時 , 目標界面 透明度逐漸增加 , 淡入顯示 ;

Hero 是界面的組成部分 , 在 源界面 和 目標界面 都存在該組件 ;

Hero 動畫涉及到的 API 較多 ;

一、創建 Hero 動畫核心組件

---

Hero 動畫 tag 標識 : Hero 動畫作用的組件在兩個界面中都存在 , 給這兩個 Hero 組件都設置相同的標識 , 通過該標識可以標識兩個 Hero 組件之間進行動畫過渡 ;

該 Hero 動畫組件封裝內容 :

• VoidCallback onTap : 從外部傳入一個回調事件 , 這是點擊組件后 , 回調的函數 ;
• String imageUrl : 作為 Hero 動畫的 tag 標識 , 同時也是圖片的 url 網絡地址 ;
• double width : 用于約束 Hero 組件的寬度 ;

代碼示例 : 這里定義核心組件 Hero 組件 , 傳入 tag 標識 , 與 Hero 動畫作用的組件 ;

/// Hero 組件 , 跳轉前后兩個頁面都有該組件 class HeroWidget extends StatelessWidget{/// 構造方法const HeroWidget({Key key, this.imageUrl, this.width, this.onTap}) : super(key: key);/// Hero 動畫之間關聯的 ID , 通過該標識/// 標識兩個 Hero 組件之間進行動畫過渡/// 同時該字符串也是圖片的 url 網絡地址final String imageUrl;/// 點擊后的回調事件final VoidCallback onTap;/// 寬度final double width;@overrideWidget build(BuildContext context) {return SizedBox(width: width,/// 這里定義核心組件 Hero 組件 , 傳入 tag 標識 , 與 Hero 動畫作用的組件child: Hero(tag: imageUrl, child: Material(color: Colors.transparent,/// 按鈕child: InkWell(/// 按鈕點擊事件onTap: onTap,child: Image.network(imageUrl, fit: BoxFit.contain,),),),),);} }

二、創建源頁面

---

創建一個 StatelessWidget 組件作為源頁面 , 其中封裝 HeroWidget 組件 , 作為顯示的核心組件 , 傳入一個 VoidCallback 方法 , 在該方法中跳轉到目的界面 ;

class HeroAnimation extends StatelessWidget{@overrideWidget build(BuildContext context) {// 時間膨脹系數 , 用于降低動畫運行速度timeDilation = 10.0;return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Hero 動畫演示( 跳轉前頁面 )"),),body: Container(color: Colors.white,padding: EdgeInsets.all(20),alignment: Alignment.bottomRight,child: HeroWidget(imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",width: 300,// 點擊事件 , 這里點擊該組件后 , 跳轉到新頁面onTap: (){},),),),);} }

三、創建目的頁面

---

創建目的界面 : 這里直接在代碼中創建 , 該界面中也封裝了 HeroWidget 組件 , 其 tag 與源界面 HeroWidget 組件相同 , 這樣就可以保證這兩個界面互相跳轉時 , 能觸發 Hero 動畫 ;

MaterialPageRoute(builder: (context){/// 跳轉到的新界面再此處定義return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Hero 動畫演示( 跳轉后頁面 )"),),body: Container(color: Colors.white,padding: EdgeInsets.all(20),alignment: Alignment.topLeft,child: HeroWidget(imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",width: 100,onTap: (){/// 退出當前界面Navigator.of(context).pop();},),),),);} )

四、頁面跳轉

---

使用 Navigator 進行頁面跳轉 , 這個頁面直接在方法中創建出來 ;

Navigator.of(context).push(MaterialPageRoute(builder: (context){/// 跳轉到的新界面再此處定義return MaterialApp(home: Scaffold(),);}) );

如果出現頁面跳轉錯誤 , 參考 【錯誤記錄】Flutter 界面跳轉報錯 ( Navigator operation requested with a context that does not include a Naviga ) 解決 ;

五、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart' show timeDilation;void main() {runApp(MaterialApp(home: HeroAnimation(),)); }/// Hero 組件 , 跳轉前后兩個頁面都有該組件 class HeroWidget extends StatelessWidget{/// 構造方法const HeroWidget({Key key, this.imageUrl, this.width, this.onTap}) : super(key: key);/// Hero 動畫之間關聯的 ID , 通過該標識/// 標識兩個 Hero 組件之間進行動畫過渡/// 同時該字符串也是圖片的 url 網絡地址final String imageUrl;/// 點擊后的回調事件final VoidCallback onTap;/// 寬度final double width;@overrideWidget build(BuildContext context) {return SizedBox(width: width,/// 這里定義核心組件 Hero 組件 , 傳入 tag 標識 , 與 Hero 動畫作用的組件child: Hero(tag: imageUrl, child: Material(color: Colors.transparent,/// 按鈕child: InkWell(/// 按鈕點擊事件onTap: onTap,child: Image.network(imageUrl, fit: BoxFit.contain,),),),),);} }class HeroAnimation extends StatelessWidget{@overrideWidget build(BuildContext context) {// 時間膨脹系數 , 用于降低動畫運行速度timeDilation = 10.0;return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Hero 動畫演示( 跳轉前頁面 )"),),body: Container(color: Colors.white,padding: EdgeInsets.all(20),alignment: Alignment.bottomRight,child: HeroWidget(imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",width: 300,// 點擊事件 , 這里點擊該組件后 , 跳轉到新頁面onTap: (){print("點擊事件觸發, 切換到新界面");Navigator.of(context).push(MaterialPageRoute(builder: (context){/// 跳轉到的新界面再此處定義return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Hero 動畫演示( 跳轉后頁面 )"),),body: Container(color: Colors.white,padding: EdgeInsets.all(20),alignment: Alignment.topLeft,child: HeroWidget(imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",width: 100,onTap: (){/// 退出當前界面Navigator.of(context).pop();},),),),);}));},),),),);} }

運行效果 :

六、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_animation ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/16188742 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。