flutter - 如何在滑动时为全屏照片转换设置动画,就像在 Telegram 中一样?

标签 flutter flutter-layout flutter-animation

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

如何使用 Flutter 重现这种效果?同样的场景,在全屏照片 View 中。 photo_view全屏需要包,因此它不应干扰缩放。

Illustration of animation

最佳答案

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

看看这个 Flutter widget of the week帮助您入门的视频,以及 this Flutter.dev有关 Hero 小部件的更详细说明的文章。

编辑:我看到您正在寻找更具体的图像查看器行为。那么,我建议你使用 photo_view package ,其中包括许多可视化图像的功能,包括具有向下滑动到关闭行为的英雄转换、捏合缩放等。

关于flutter - 如何在滑动时为全屏照片转换设置动画,就像在 Telegram 中一样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60537374/

相关文章:

flutter - 使用 flutter 开发不同的屏幕尺寸?

Flutter:从具有正确重叠的矩阵变换中布局具有不同 z 坐标的多个子项

flutter - 如何在 Flutter 中仅突出显示文本中的数字和特殊字符?

flutter - 如何在 SliverAppBar 中为项目的位置设置动画以在关闭时围绕标题移动它们

dart - 为什么 setState 会关闭?

android - 您的 Flutter 应用程序是使用旧版本的 Android 嵌入创建的

android - 在 flutter 中具有拖动效果的滚动条

flutter - 在Flutter中将小部件彼此相邻放置

firebase - 更新 map 字段-Flutter

flutter - 如何在 flutter 中更改光标颜色