Flutter 动画 Hero、更多动画示例-蒲公英云

Flutter 动画 Hero、更多动画示例

文章目录

- - Hero 动画
  - - 效果示例
  - 更多动画
  - - 效果展示

Hero 动画

在 Android中有共享元素动画，能够实现页面之间共享元素的切换效果。Flutter 中也提供相应的 Hero widget 实现该效果。

既然 Hero是个widget，按照惯例，我们来看看构造函数支持哪些字段：

const Hero({
    Key key,
    @required this.tag, // 共享元素标识符，两个页面的 tag 需要一样且唯一
    this.createRectTween, // 定义目标 Hero 从起始路径 飞向目标路径时的边界变化。
    this.flightShuttleBuilder,// 可选替代，以提供在 Hero 动画执行期间显示的小部件。
    this.placeholderBuilder, //动画执行后，将占位符小部件保留为 Hero 的 child。
    this.transitionOnUserGestures = false, // 如果 PageRoute 转换是由用户手势（例如iOS上的向后滑动）触发的，是否执行 Hero 转换，默认是 false
    @required this.child, // 共享动画执行的 child 
  })

比较常用的属性也就两个：tag 和 child，下面来看简单的示例

效果示例

该效果是从网格列表中点击 item 跳转到详情页面有一个过度的效果，这是使用了 Hero 动画实现共享动画。在这两个页面之间的共享元素是展示的图片。

在这里插入图片描述

在实现以上效果的时候，为了保证tag的统一，我将它们放到常量类里面，统一调用.
在这里插入图片描述

但是使用的时候还是出现问题了。

There are multiple heroes that share the same tag within a subtree.

大概意思就是说Hero存在多个相同的tag，导致的根本原因还没仔细研究。
不过既然是tag相同那么，保存tag唯一就行了。
这里文章的id是唯一的因此在tag中添加文章的id即可保证tag的唯一

Container(
  color: Colors.grey,
  child:Hero(
    tag: '${Constant.heroPhotoDetail} $id', // 使用常量标识符 + id 
    child:  ExtendedImage.network(
      envelopePic,
      fit: BoxFit.fitWidth,
    ),
  )
),