比如现在有一个头像组件,初始的时候是一个圆形的小图,我们想实现点击后查看大图的功能,为了有较好的体验,小图变成大图和大图变回小图时我们分别执行一个“飞行”过渡动画,效果如图9-2所示:
要实现上面的动画效果,最简单的方式就是使用 Flutter 的 Hero 动画,但是为了让读者理解 Hero 动画原理,我先不使用Hero 动画,而是通过之前章节所学的知识来实现一下这个效果。
简单分析后有一个思路:首先我们先确定小图和大图的位置和大小,动画的话用一个Stack,然后通过 Positioned 来设置每一帧的组件位置和大小,实现如下:
class CustomHeroAnimation extends StatefulWidget {const CustomHeroAnimation({Key? key}) : super(key: key);@override_CustomHeroAnimationState createState() => _CustomHeroAnimationState();}class _CustomHeroAnimationState extends State<CustomHeroAnimation>with SingleTickerProviderStateMixin {late AnimationController _controller;bool _animating = false;AnimationStatus? _lastAnimationStatus;late Animation _animation;//两个组件在Stack中所占的区域Rect? child1Rect;Rect? child2Rect;@overridevoid initState() {_controller =AnimationController(vsync: this, duration: Duration(milliseconds: 200));//应用curve_animation = CurvedAnimation(parent: _controller,curve: Curves.easeIn,);_controller.addListener(() {if (_controller.isCompleted || _controller.isDismissed) {if (_animating) {setState(() {_animating = false;});}} else {_lastAnimationStatus = _controller.status;}});super.initState();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {//小头像final Widget child1 = wChild1();//大头像final Widget child2 = wChild2();//是否展示小头像;只有在动画执行时、初始状态或者刚从大图变为小图时才应该显示小头像bool showChild1 =!_animating && _lastAnimationStatus != AnimationStatus.forward;// 执行动画时的目标组件;如果是从小图变为大图,则目标组件是大图;反之则是小图Widget targetWidget;if (showChild1 || _controller.status == AnimationStatus.reverse) {targetWidget = child1;} else {targetWidget = child2;}return LayoutBuilder(builder: (context, constraints) {return SizedBox(//我们让Stack 填满屏幕剩余空间width: constraints.maxWidth,height: constraints.maxHeight,child: Stack(alignment: AlignmentDirectional.topCenter,children: [if (showChild1)AfterLayout(//获取小图在Stack中占用的Rect信息callback: (value) => child1Rect = _getRect(value),child: child1,),if (!showChild1)AnimatedBuilder(animation: _animation,builder: (context, child) {//求出 rect 插值final rect = Rect.lerp(child1Rect,child2Rect,_animation.value,);// 通过 Positioned 设置组件大小和位置return Positioned.fromRect(rect: rect!, child: child!);},child: targetWidget,),// 用于测量 child2 的大小,设置为全透明并且不能响应事件IgnorePointer(child: Center(child: Opacity(opacity: 0,child: AfterLayout(//获取大图在Stack中占用的Rect信息callback: (value) => child2Rect = _getRect(value),child: child2,),),),),],),);});}Widget wChild1() {//点击后执行正向动画return GestureDetector(onTap: () {setState(() {_animating = true;_controller.forward();});},child: SizedBox(width: 50,child: ClipOval(child: Image.asset("imgs/avatar.png")),),);}Widget wChild2() {// 点击后执行反向动画return GestureDetector(onTap: () {setState(() {_animating = true;_controller.reverse();});},child: Image.asset("imgs/avatar.png", width: 400),);}Rect _getRect(RenderAfterLayout renderAfterLayout) {//我们需要获取的是AfterLayout子组件相对于Stack的Rectreturn renderAfterLayout.localToGlobal(Offset.zero,//找到Stack对应的 RenderObject 对象ancestor: context.findRenderObject(),) &renderAfterLayout.size;}}
运行后点击头像就可以实现上图中的动画效果,注意,我们是通过自定义的 AfterLayout 组件来获取组件的 Rect 信息的,该组件在第四章介绍过,我们将在14.4节中详细介绍该组件原理。
可以看到,整个飞行动画的实现还是比较复杂的,但由于这种飞行动画在交互上会经常被用到,因此 Flutter 在框架层抽象了上述实现飞行动画的逻辑,提供了一种通用且简单的实现 Hero 动画的方式。
Hero 指的是可以在路由(页面)之间“飞行”的 widget,简单来说 Hero 动画就是在路由切换时,有一个共享的widget 可以在新旧路由间切换。由于共享的 widget 在新旧路由页面上的位置、外观可能有所差异,所以在路由切换时会从旧路逐渐过渡到新路由中的指定位置,这样就会产生一个 Hero 动画。
你可能多次看到过 hero 动画。例如,一个路由中显示待售商品的缩略图列表,选择一个条目会将其跳转到一个新路由,新路由中包含该商品的详细信息和“购买”按钮。 在Flutter中将图片从一个路由“飞”到另一个路由称为hero动画,尽管相同的动作有时也称为 共享元素转换。下面我们通过一个示例来体验一下 hero 动画。
为什么要将这种可飞行的共享组件称为hero(英雄),有一种说法是说美国文化中的超人是可以飞的,那是美国人心中的大英雄,还有漫威中的超级英雄基本上都是会飞的,所以Flutter开发人员就对这种“会飞的widget”就起了一个富有浪漫主义的名字hero。当然这种说法并非官方解释,但却很有意思。
假设有两个路由A和B,他们的内容交互如下:
A:包含一个用户头像,圆形,点击后跳到B路由,可以查看大图。
B:显示用户头像原图,矩形。
在AB两个路由之间跳转的时候,用户头像会逐渐过渡到目标路由页的头像上,接下来我们先看看代码,然后再解析。
路由A:
class HeroAnimationRouteA extends StatelessWidget {const HeroAnimationRouteA({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(alignment: Alignment.topCenter,child: Column(children: <Widget>[InkWell(child: Hero(tag: "avatar", //唯一标记,前后两个路由页Hero的tag必须相同child: ClipOval(child: Image.asset("imgs/avatar.png",width: 50.0,),),),onTap: () {//打开B路由Navigator.push(context, PageRouteBuilder(pageBuilder: (BuildContext context,animation,secondaryAnimation,) {return FadeTransition(opacity: animation,child: Scaffold(appBar: AppBar(title: const Text("原图"),),body: const HeroAnimationRouteB(),),);},));},),const Padding(padding: EdgeInsets.only(top: 8.0),child: Text("点击头像"),)],),);}}
路由B:
class HeroAnimationRouteB extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Hero(tag: "avatar", //唯一标记,前后两个路由页Hero的tag必须相同child: Image.asset("imgs/avatar.png"),),);}}
我们可以看到,实现 Hero 动画只需要用Hero
组件将要共享的 widget 包装起来,并提供一个相同的 tag 即可,中间的过渡帧都是 Flutter 框架自动完成的。必须要注意, 前后路由页的共享Hero
的 tag 必须是相同的,Flutter 框架内部正是通过 tag 来确定新旧路由页widget的对应关系的。
Hero 动画的原理比较简单,Flutter 框架知道新旧路由页中共享元素的位置和大小,所以根据这两个端点,在动画执行过程中求出过渡时的插值(中间态)即可,而感到幸运的是,这些事情不需要我们自己动手,Flutter 已经帮我们做了,实际上,Flutter Hero 动画的实现原理和我们在本章开始自实现的原理是差不多的,读者有兴趣可以去看 Hero 动画相关的源码。