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,
    ),
  )
),

详细代码实现可查看 YGragon/Flutter-WanAndroid 中的 photo_page 、photo_page_detail这两个包。

更多动画

• 查看里面的视频讲解。https://flutter.dev/docs/development/ui/animations
• Flutter提供的widget动画https://flutter.dev/docs/development/ui/widgets/animation

效果展示

以下效果来源于：https://flutter.dev/docs/development/ui/widgets/animation

• AnimatedDefaultTextStyle
  

• AnimatedContainer
  

• AnimatedCrossFade

• AnimatedOpacity
  

• AnimatedPhysicalModel
  

• AnimatedPositioned
  

• DecoratedBoxTransition
  

• FadeTransition
  

• PositionedTransition
  

• RotationTransition
  

• ScaleTransition
  

• SizeTransition

对自己的大小进行动画处理，然后裁剪并对齐其子级。

• SlideTransition