PageView 中类似 Flutter Hero 的过渡

Question

我在 PageView 的一页中有一个图像。当我转到它时，我想将此图像动画到下一页，有点像在导航器页面转换中使用英雄动画时。任何想法如何实现？

Answer 1

为了实现类似于英雄动画的动画。基本上我们将实现的是this ，您将需要 5 个元素:

初始全局坐标

最终坐标

初始小部件大小

最终小部件大小

您想要制作动画的小部件

现在，为了创建跨越 2 个屏幕的动画，我们需要使用 flutter 中存在的叠加层。 link

将要设置动画的小部件添加到叠加层(不是屏幕上显示的小部件，而是一个新实例)。

将此覆盖条目定位在动画的起始坐标(原始小部件的位置)中。

隐藏原始小部件。

创建一个更改 x 和 y 坐标以创建自定义运动的动画，这可以是任何曲线，最简单的是起始坐标和结束坐标之间的简单补间。

另一个动画，动画开始和结束大小之间的大小变化。此动画可以与上一个动画结合使用。 (一个补间动画，但值是手动计算的)

动画完成后，移除覆盖条目，并显示新的小部件。 (这可以作为定时操作或回调操作来完成)

这是所有可用选项中最灵活的，因为您可以访问处于所有状态的小部件。但是，使用此方法时必须非常小心，因为如果未正确实现，可能会导致速度减慢。