如何在滑动时为全屏照片过渡设置动画，例如在 Telegram 中？答案

【问题标题】：How to animate fullscreen photo transition on swipe, like in Telegram?如何在滑动时为全屏照片过渡设置动画，例如在 Telegram 中？
【发布时间】：2020-06-17 14:43:35
【问题描述】：

当您垂直滑动时，图像被拖向滑动，并带有黑色背景的淡出动画。释放后，它会平滑地回到屏幕上之前的位置，就像英雄动画一样。

如何使用 Flutter 重新创建这样的效果？同样的场景，在全屏照片视图中。全屏需要photo_view 包，因此它不应干扰缩放。

【问题讨论】：

哥们，Telegram 不是开源的吗？
@SeanBrookins 是的。但它不是写在 Flutter 上的（我的问题与此有关——请参阅标签）。
我确实看到了它们，我只是建议看看它们的实现 :)
@SeanBrookins 如果我知道去哪里看 :D，我认为从 Flutter 的角度考虑这种转变要比深入研究他们的原生代码花费更少的时间

标签： flutter flutter-layout flutter-animation

【解决方案1】：

您实际上需要的是一个开箱即用的小部件，而且它非常易于使用。它被称为Hero。基本上，您将要制作动画的小部件包装在 Hero 小部件中，并带有特定的 tag 字符串，并且当您导航到另一个屏幕时，您将目标小部件包装在另一个具有相同标签的 Hero 中.可以通过将具有相同照片的两个小部件与Heroes 包装在不同的PageRoutes 中来实现类似于您共享的效果。

查看此 Flutter widget of the week 视频以帮助您入门，并查看 this Flutter.dev 文章以获取有关 Hero 小部件的更详细说明。

编辑：我看到您正在寻找更具体的图像查看器行为。然后，我建议你使用photo_view package，它包含许多可视化图像的功能，包括带有滑动到关闭行为的英雄转换、捏到缩放等。

【讨论】：

这里的问题不是英雄动画，而是更多关于滑动处理的问题。你将如何使用 Hero 为这样的小部件设置动画 - 让它跟随滑动，并在松开手指时回到上一个屏幕上的位置？
哦，我明白你的意思了。然后，查看我在答案中的编辑。
这正是我正在使用的包。你能解释一下如何使用这个包在我的问题中实现类似于 gif 的动画吗？我没有在这个包中找到任何向下滑动关闭的参数。

【解决方案2】：

我找到了解决方案。要创建这样的动画，你应该使用 extended_image 包，它有 SlideOutPage 小部件来创建这样的过渡。

【讨论】：