【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
文章目录
- ◯、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 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )相关推荐
- 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入 一.创建 AnimatedWidget 动画组件 二.创建动画控制器 三.创建动画 四.动画运行 五.完整代码示例 六.相关资源 Animated ...
- Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...
- 用一个demo理解一下Flutter动画内部的代码流程
先上代码: import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Material(child: S ...
- 小鬼学cocos2dX笔记01——创建精灵动画(二)
接上部分,我们完成了上面的操作后,就要开始往我们的cpp里写代码啦~~~ bool HelloWorld::init() {//// 1. super init firstif ( !CCLayerC ...
- cocos2d-x创建精灵动画
创建动画一般过程: 1.创建精灵框架缓存,并向其中添加相应的动画文件(plist),最后,通过动画集缓存生产动画 CCSpriteFrameCache *cache = CCSpriteFrameCa ...
- 【Flutter 实战】17篇动画系列文章带你走进自定义动画
老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...
- 如何使用纯 CSS 创建翻牌动画
下面的示例向您展示了如何使用纯 CSS 创建翻牌动画. 作者:坚果 公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GV ...
- 在UE4中创建CG动画 How to create a movie in Unreal Engine 4 using Metahuman
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:1.55 GB |时长:1h 16m 你会学到什么 如何在 ...
- Unity插件之NGUI学习(4)—— 创建UI2DSprite动画
创建一个新的Scene.并按 Unity插件之NGUI学习(2)创建UI Root,并在UI Root的Camera下创建一个Panel. 然后在选中Panel,在菜单中选择NGUI->Crea ...
最新文章
- Lotgstash日志切割示例
- vSphere企业运维:从入门到提高【学习路线图】
- 史上最简单的SpringCloud教程 | 第七篇: 高可用的分布式配置中心(Spring Cloud Config)
- 如何有效地进行代码 Review?
- 内容分发网络 - Content Delivery Network 学习笔记
- u盘引导linux加载raid卡驱动,使用U盘加载SCSI/RAID卡驱动
- python继承和多态_Python 简明教程 --- 21,Python 继承与多态
- Coursera心理学课程考试小抄
- LINUX模拟键盘F5的脚本(未试过)
- python plot坐标轴_修改python plot折线图的坐标轴刻度方法
- 敏感词过滤golang
- 双人成行本地安装X360ce模拟手柄教程xpadder手柄模拟键盘鼠标
- esp8266教程:编译sdk常用命令
- ue4 中KismetProceduralMeshLibrary SliceProceduralMesh的原理
- php中thead怎么居中,html thead标签怎么用
- 一张图片中多个图标如何通过CSS定位显示?
- 实现自己的Protobuf Any
- RobotStudio安装步骤
- 文青山在自动化测试空间的博客
- iOS 7如何解决相册无法访问的问题?