系列文章

Flutter 旋转动画 — RotationTransition
Flutter 平移动画 — 4种实现方式
Flutter 淡入淡出与逐渐出现动画
Flutter 尺寸缩放、形状、颜色、阴影变换动画
Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出
Flutter Hero 实现共享元素转场动画
Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画

文章目录

系列文章
1 动画效果
2 Hero介绍
3 未使用Hero时的页面切换
4 使用Hero实现的转场动画

1 动画效果

2 Hero介绍

Hero 是Flutter提供的一个可以实现子Widget在页面切换时带有飞行效果的Widget，可实现元素共享动画效果。

实现方式：在2个页面之间，都使用Hero包裹子控件并设置相关的tag标识即可。

注意：同一个页面中不能使用多个相同的Hero Tag

3 未使用Hero时的页面切换

列表页面

class ListPage extends StatefulWidget {const ListPage({Key? key}) : super(key: key);@overrideState<StatefulWidget> createState() => _ListPageState();
}class _ListPageState extends State<ListPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('列表页'), centerTitle: true),body: GridView.count(crossAxisCount: 2,children: List.generate(10, _buildItem),),);}Widget _buildItem(int index) {return CupertinoButton(padding: EdgeInsets.zero,onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => DetailPage(index: index)),);},child: _buildImageWidget(index),);}// 列表页的Image size是120Widget _buildImageWidget(int index) {return const FlutterLogo(size: 120);}
}

详情页面

class DetailPage extends StatefulWidget {final int index;const DetailPage({Key? key, required this.index}) : super(key: key);@overrideState<StatefulWidget> createState() => _DetailPageState();
}class _DetailPageState extends State<DetailPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('详情页'), centerTitle: true),body: SizedBox(width: double.infinity,child: Column(mainAxisSize: MainAxisSize.min,children: [const SizedBox(height: 12),_buildImageWidget(widget.index),const SizedBox(height: 12),Text(' ${widget.index} ：登高（作者：杜甫）',style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),const SizedBox(height: 12),const Text('风急天高猿啸哀，\n渚清沙白鸟飞回。\n无边落木萧萧下，\n不尽长江滚滚来。''\n万里悲秋常作客，\n百年多病独登台。\n艰难苦恨繁霜鬓，\n潦倒新停浊酒杯。\n',textAlign: TextAlign.center,style: TextStyle(color: Colors.black, fontSize: 15),),],),),);}// 详情页的Image size是250Widget _buildImageWidget(int index) {return const FlutterLogo(size: 250);}
}

效果图

4 使用Hero实现的转场动画

实现Widget切换页面时飞到下一页的动画，使用Hero Widget包裹列表与详情页的图片Widget，并设置相同的tag即可。
修改 _buildImageWidget，使用Hero包裹FlutterLogo，并传入唯一的tag。

列表页

  // 列表页的Image size是120Widget _buildImageWidget(int index) {// 同一页面的hero不能有多个相同tagreturn Hero(tag: 'hero_tag_$index',child: const FlutterLogo(size: 120),);}

详情页

  // 详情页的Image size是250Widget _buildImageWidget(int index) {return Hero(tag: 'hero_tag_$index',child: const FlutterLogo(size: 250),);}

动画效果

Flutter Hero 实现共享元素转场动画相关推荐

谈一谈Flutter中的共享元素动画Hero
如果你是一名安卓开发者,应该很熟悉共享元素变换(Shared Element Transition)这个概念,它可以通过几行代码,就在两个Activity或者Fragment之间做出流畅的转场动 ...
android+场景切换,Android共享元素场景切换动画的实现
今天跟大家分享的是场景切换的共享元素,源码已经上传到github: 我们知道安卓5.0系统引入了共享元素,能做出非常炫酷的场景切换效果,这让人非常兴奋同时非常蛋疼,因为低版本没法使用啊,所以今天就跟大 ...
Flutter 使用自定义 fluro 路由转场动画实现个性化页面切换
fluro 转场动画源码在使用自定义转场动画前,先扒一扒 fluro 的源码,通过源码可以发现这么一个标准的转场方法: RouteTransitionsBuilder _standardTransi ...
Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...
android共享元素动画兼容低版本
文章目录共享元素动画 5.0以上系统方案详细代码流程 5.0以下兼容方案简述流程详细代码流程上篇: activity转场动画一款APP让人赏心悦目的APP,动画是它并不可少的部分,Andr ...
Material Design之定制动画--触摸反馈，循环揭露，转场动画,共享元素和曲线运动
先贴下官网的API https://developer.android.com/training/material/animations.html 触摸反馈: 在按钮属性中添加 android:bac ...
android 转场动画共享元素,关于android:四步通过Glide实现共享元素无缝转场效果...
读完这篇文章, 你就会晓得应用Glide等图片加载库实现共享元素转场成果,以及如何解决各种可能加载状态.通过共享转场动画,能够晋升利用交互体验,让用户应用起来更愉悦. 共享元素转场成果是Materia ...
android 延时播放动画,HollyTransition: 让APP丝滑般流畅：深入解读Android过渡动画Transition. 共享元素动画、场景动画、过场动画、延时动画...
HollyTransition 零.导读深入解读Android过渡动画Transition: 页面切换动画(过场动画) 共享元素动画延时动画场景动画一.Transition前世今生为了支持各 ...
微信小程序共享元素+ page-container假页实现弹出效果
1.实现效果 2.实现原理 page-container page-container 小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗.在页面内加载一个全屏的子页面等),用户进行返回操 ...

Flutter Hero 实现共享元素转场动画