具有类似 PageView 实现的 Flutter Hero 动画

Question

大家好，我有一个与此非常相似的问题：Flutter Hero-like transition in PageView

我认为不同之处在于这个问题有更多的背景。

我们有一个带有 PageView 的水平滚动站点，我们希望在两个页面之间为图标设置动画。有点像这样：https://flutter.dev/docs/development/ui/animations/hero-animationsThing。

问题是，大多数带有 HeroAnimations 的教程都使用

Navigator.of(context).push(MaterialPageRoute<void>(
          builder: (BuildContext context) {
            return 

您是否建议我们只重建页面以便它具有此导航器推送？我认为这需要实现手势检测器以使其感觉像 PageView 以及自定义转换。

您可以在https://teamcrushing.it查看我们的草稿

页面视图只是让它变得如此简单，但也许我们需要制作自己的页面视图来获得这个功能。

Answer 1

pub.dev 上有一个名为 coast 的包，它为页面视图提供英雄般的动画。

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

Answer 2

在某些情况下，切换到页面结构可能更实用，但如果您不能，我们可以实现自己的英雄导航动画。但是它可能没有英雄动画那么高效，但简而言之，要创建具有我们需要实现this 的最基本功能的此类动画，您将需要 5 个元素：

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

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

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

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