阅读 4040

【译】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…
关注下面的标签,发现更多相似文章
评论