PageView 中类似 Flutter Hero 的过渡

Question

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

Answer 1

从而实现类似英雄动画的动画。基本上我们要实现的是这个，你需要 5 个元素：

1. 初始全局坐标
2. 最终坐标
3. 初始小部件大小
4. 最终小部件尺寸
5. 您想要设置动画的小部件

现在，为了创建跨越两个屏幕的动画，我们需要使用 flutter 中存在的覆盖层。关联

1. 将要动画的小部件添加到覆盖层（不是屏幕上存在的小部件，而是一个新实例）。
2. 将此覆盖条目放置在动画的起始坐标（原始小部件的位置）中。
3. 隐藏原来的小部件。
4. 创建一个更改 x 和 y 坐标的动画以创建自定义运动，这可以是任何曲线，最简单的是起始坐标和结束坐标之间的简单补间。
5. 另一个动画，以动画方式显示开始尺寸和结束尺寸之间的尺寸变化。该动画可以与上一个动画结合起来。（一个补间动画，但值是手动计算的）
6. 动画完成后，删除覆盖条目，并显示新的小部件。（这可以作为定时操作或回调操作来完成）

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