前言
写了一篇基础的性能优化的内容,继续我们的动画相关的介绍。今天的主角是英雄 —— hero 组件。hero 组件非常适合从列表、概览页切换到详情页转场动画场合。因为可以将两个页面的组件串起来动画,体验上会觉得整个操作的连贯性非常好。下面是我们这篇要做的一个效果。
屏幕录制2021-11-09 下午9.39.49.gif
hero 动画过程
hero 本质是是在不同的路由页面做了一个中转层,然后通过动画完成过渡,下面用4张图是官方演示的过程。
动画开始前,会准备一个空的遮罩层(overlay)。此时目标路由页面还没生成。
转场前
t = 0.0,即动画开始时,源页面已经从屏幕消失,遮罩层出现在屏幕上,此时目标路由页面已经构建好,并且在遮罩层下方不可见。但此时 flutter 渲染引擎已经计算出从遮罩层到目标路由页面的动画路径。
起始阶段
动画过程中,英雄飞起来,逐步飞到目标页面。使用的是tween<rect>
方式更改外形和位置,默认是使用 materialrectarctween
对象完成动画。
飞行过程
动画结束:遮罩层消失,只剩下目标路由页面。而源页面恢复到它对应的路由状态(以便返回时使用逆向的动画)。
动画结束
hero 基础示例
下面来看我们本篇动画效果的实现。对于 hero 最简单的应用,就是前后两个路由页面的 hero 组件使用相同的 tag
标识,然后所有动画都交给 hero 来完成了 —— 果然是超级英雄,啥都不用我们管!当然,为了用户体验,前后两个页面的组件最好是具有相同的内容(比如图片),然后如果组件树结构是一致的话效果更好。
我们这个示例的第一个页面就是两张小尺寸的图片,这里的关键是 hero 组件的 tag
标签,两张图片使用了不同的 tag
,这是因为同一个页面的多个 hero 不能共用 tag 。
widget build(buildcontext context) { return scaffold( appbar: appbar( title: text('hero 基础动画'), brightness: brightness.dark, ), body: center( child: row( mainaxisalignment: mainaxisalignment.spaceevenly, crossaxisalignment: crossaxisalignment.center, children: [ hero( tag: 'beauty1', child: roundimage( ontap: () { navigator.of(context).push( materialpageroute( builder: (context) => herodetail( tag: 'beauty1', assetimagename: 'images/beauty.jpeg', ), ), ); }, assetimagename: 'images/beauty.jpeg', imagesize: 80.0, ), ), // 省略图片2 ], ), ), ); }
详情页面只有一个居中的图片,也是用的 hero 组件。只是为了和源页面一致,这里的 tag
,图片资源都是由源页面传递进来。
class herodetail extends statelesswidget { final string tag; final string assetimagename; const herodetail({key? key, required this.tag, required this.assetimagename}) : super(key: key); @override widget build(buildcontext context) { return scaffold( appbar: appbar( title: text('hero 基础动画详情'), brightness: brightness.dark, ), body: center( child: sizedbox( width: 200, height: 200, child: hero( tag: this.tag, child: roundimage( ontap: () { navigator.of(context).pop(); }, assetimagename: this.assetimagename, imagesize: 200.0, ), ), ), ), ); } }
这样就完成了我们前面的转场动画效果,源码已上传至:动画相关源码。怎么样?有了 hero之后,是不是感觉英雄救场一样,让你的转场轻松多了!
总结
本篇介绍了 hero 动画的基本过程和基础示例。借助 hero,对于我们很多场景可以让转场效果更好,比如说从商品列表切换到商品详情,从资讯列表到资讯详情。都可以给用户带来更好的体验。
以上就是android flutter实现页面切换转场动画效果的详细内容,更多关于android flutter页面切换转场动画的资料请关注其它相关文章!