Flutter 具有类似 PageView 实现的英雄动画

Question

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

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

我们有一个带有 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的package，它为页面视图提供英雄般的动画。

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

Answer 2

在某些情况下，切换到页面结构可能更实用，但如果你不能实现我们自己的英雄导航 animation。 但是它可能不如英雄 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 完成后，删除覆盖条目，并显示新的小部件。 （这可以作为定时操作或回调操作来完成）

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