如何在滑动时为全屏照片过渡设置动画，就像在Telegram中一样？

Question

[垂直滑动时，图像会向滑动方向拖动，淡出黑色背景的动画。发行后，它会像英雄动画一样平滑返回到屏幕上的先前位置。

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

Answer 1

您实际上需要一个现成的小部件，并且使用起来非常简单。称为Hero。基本上，您要使用Hero小部件将要进行动画处理的小部件包装为特定的tag字符串，然后，当导航到另一个屏幕时，将目标小部件包装在具有相同标签的另一个Hero中。可以通过将两个具有相同照片的小部件包装为Hero并放在不同的PageRoute中来实现与您共享的效果。

[观看此Flutter widget of the week视频以开始使用，有关this Flutter.dev小部件的详细说明，请参见Hero文章。

编辑：我看到您正在寻找更特定的图像查看器行为。然后，我建议您使用photo_view package，其中包括许多功能以使图像可视化，包括具有按一下鼠标即可切换的行为的英雄过渡，捏缩缩放等。

Answer 2

我找到了解决方案。要创建这样的动画，您应该使用Extended_image程序包，该程序包具有“滑出页面”小部件来创建此类过渡。