页面切换转场动画，英雄救场更有趣

前言

写了一篇基础的性能优化的内容，继续我们的动画相关的介绍。今天的主角是英雄 —— Hero 组件。Hero 组件非常适合从列表、概览页切换到详情页转场动画场合。因为可以将两个页面的组件串起来动画，体验上会觉得整个操作的连贯性非常好。下面是我们这篇要做的一个效果。

Hero 动画过程

Hero 本质是是在不同的路由页面做了一个中转层，然后通过动画完成过渡，下面用4张图是官方演示的过程。

• 动画开始前，会准备一个空的遮罩层（Overlay）。此时目标路由页面还没生成。

• t = 0.0，即动画开始时，源页面已经从屏幕消失，遮罩层出现在屏幕上，此时目标路由页面已经构建好，并且在遮罩层下方不可见。但此时 Flutter 渲染引擎已经计算出从遮罩层到目标路由页面的动画路径。