flutter - PageView 中类似 Flutter Hero 的过渡

Question

我在 PageView 的一页中有一张图片。当我转到它时，我想将此图像动画到下一页，有点像在导航器页面转换中使用英雄动画时。有什么想法可以实现吗？

Answer 1

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

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

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

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

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

Answer 2

这个包做你想要的https://pub.dev/packages/coast

它本质上采用与 Flutter 的 Hero 和 HeroController 相同的方法：检测何时开始转换，在源页面和目标页面的元素树中搜索标记为动画的小部件（英雄、螃蟹），根据它们的标签将它们配对, 最后在 Overlay 中创建一个条目，其位置和大小是源页面和目标页面上的插值。