Flutter PageView 中类似英雄的过渡

Question

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

Answer 1

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

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

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

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

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

Answer 2

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

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