Flutter进阶：在应用中实现 Hero(飞行) 动画

hero 动画介绍

Hero 指的是能够在路由(页面)之间“飞行”的 widget，从一个页面打开另外一个页面时产生一个简单的过渡动画，看下图实例：

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：github.com/MeandNi

我的博客：meandni.com/

欢迎一块儿交流移动开发的技术！

参考资料：

flutter.io/docs/develo…

medium.com/flutter-com…

标题	连接
Flutter进阶：深刻探究 ListView 和 ScrollPhysics	juejin.im/post/5c4c20…
Flutter进阶：深刻探究 TextField	juejin.im/post/5c4c4e…