前言
我们在 页面切换转场动画,英雄救场更有趣!介绍了 Hero 动画效果,使用 Hero 用于转场能够提供非常不错的体验。既然称之为英雄,肯定还有其他技能,本篇我们就来探索一下 Hero 动画的返回效果。
Hero 的定义
Hero 组件是一个 StatefulWidget,构造方法如下:
const Hero({
Key? key,
required this.tag,
this.createRectTween,
this.flightShuttleBuilder,
this.placeholderBuilder,
this.transitionOnUserGestures = false,
required this.child,
})
其中 createRectTween
就是一个矩形插值,用于控制 Hero 组件的路径。实际上,和普通动画一样,也是有一个时间曲线,取值范围是0-1.0,然后createRectTween
保证 Hero 组件动画前后能够达到矩形指定位置和大小。下面一张图是官网的说明图:
RectTween
RectTw