https://www.jianshu.com/p/96075a8585f6
hero 动画介绍
Hero 指的是可以在路由(页面)之间“飞行”的 widget，从一个页面打开另一个页面时产生一个简单的过渡动画，看下图实例：
<center><img width="384px" height="640" src="https://user-gold-cdn.xitu.io/2019/1/27/1688f711e2b6d482?w=1080&h=1920&f=gif&s=3549931"></center>
Hero Animations 采用类似图标的 widget ，称为“hero”，一旦触发页面过渡，例如单击图标，hero 将会“飞”到下一页。 当用户导航回到上一页面时，也将实现原路返回的动画。
更多介绍，请看官网。
这里我们不仅学习如何使用 hero 动画，也将会自定义一些我们自己实现的动画。
构建一个普通的 hero 动画
hero 动画允许我们在 Flutter 中用最简单的方式实现漂亮动画，无需太多设置。 在上面的例子中，我们可以看到两个页面上都存在相同的图标或者图片。 我们需要做的只是 让这两者以某种方式相关联。
要实现它，我们可以通过在 Hero 组件中包含图标之类的组件。
Hero(
tag: "DemoTag",
child: Icon(
Icons.add,
size: 70.0,
),
),
我们需要设置了一个 tag 参数，给这个 hero 一个独立的名字（类比 Android 中的 ID），因为如果我们在同一页面上有多个 hero ，每个 hero 都需要知道它们将飞往何处且在各不相同的地方。
现在应用程序有一个 hero 组件想要飞到下一页。接下来就是要告诉它将要飞向何处。
我们仅需要在第二页上添加带有相同标签的Hero小部件就可实现这个效果。
Hero(
tag: "DemoTag",
child: Icon(
Icons.add,
size: 150.0,
),
),
实例如下：
自定义 hero 动画
Hero 组件允许我们自定义各种过渡效果。 有以下几种方法。
添加占位符
在组件飞离它曾经处于的位置并且到达目标位置之前，目标处有一处空的地方。 我们可以在此位置添加占位符。
我们现在使用 CircularProgressIndicator 作为占位符。
Hero(
tag: "DemoTag",
child: Icon(
Icons.add,
size: 150.0,
),
placeholderBuilder: (context, widget) {
return Container(
height: 150.0,
width: 150.0,
child: CircularProgressIndicator(),
);
},
),
我们使用 placeholderBuilder 来构造占位符并返回我们希望作为占位符的组件。
使用占位符：
更改 hero 组件
Flutter 允许我们更改从一个页面飞到另一个页面过程的组件，而无需更改两个页面上的组件。
让我们在不更改 hero 组件的子组件的前提下，使用火箭图标“飞”而不是 “+” 图标 。
我们使用 flightShuttleBuilder 参数执行此操作。
Hero(
tag: "DemoTag",
child: Icon(
Icons.add,
size: 150.0,
),
flightShuttleBuilder: (flightContext, animation, direction,
fromContext, toContext) {
return Icon(FontAwesomeIcons.rocket, size: 150.0,);
},
),
flightShuttleBuilder 有5个参数，用来设置动画以及动画的方向。
目前，两个方向的火箭图标大小都保持在 150.0 。 通过使用方法的 direction 参数，我们可以为每个方向配置不同的配置。
if(direction == HeroFlightDirection.push) {
return Icon(
FontAwesomeIcons.rocket,
size: 150.0,
);
} else if (direction == HeroFlightDirection.pop){
return Icon(
FontAwesomeIcons.rocket,
size: 70.0,
);
}
使 hero 动画可以支持 iOS 返回滑动手势
默认情况下，当在 iOS 上按后退按钮时，hero 动画会有效果，但它们在手势滑动时并没有。
使用返回按钮：
使用滑动手势
要解决此问题，只需在两个 Hero 组件上将 transitionOnUserGestures 设置为 true 即可。 默认情况下这里是 false。
Hero(
tag: "DemoTag",
child: Icon(
Icons.add,
),
transitionOnUserGestures: true,
),
效果如下：
最后
利用时间整理分析自己所学的知识是件非常有意义的事情，希望这也能帮到其他正在学习的同学。同时我也正在用Flutter写几个项目，写好之后就会开源给大家。
Github：https://github.com/MeandNi
个人博客：https://meandni.com/
欢迎一起交流移动开发的技术！
参考资料：
https://flutter.io/docs/development/ui/animations/hero-animations
https://medium.com/flutter-community/a-deep-dive-into-hero-widgets-in-flutter-d34f441eb026
| 标题 | 链接 |
|---|---|
| Flutter进阶：深入探究 ListView 和 ScrollPhysics | https://juejin.im/post/5c4c202df265da615064ce4b |
| Flutter进阶：深入探究 TextField | https://juejin.im/post/5c4c4e22f265da6174652fb4 |
作者：Meandni
链接：https://www.jianshu.com/p/96075a8585f6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。