PageView 中类似 Flutter Hero 的过渡

DeT*_*xer 5 dart flutter flutter-layout flutter-animation flutter-pageview

我在 PageView 的一页中有一个图像。当我转到它时,我想将此图像动画到下一页,有点像在导航器页面转换中使用英雄动画时。任何想法如何实现?

Moh*_*ieh 1

从而实现类似英雄动画的动画。基本上我们要实现的是这个,你需要 5 个元素:

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

现在,为了创建跨越两个屏幕的动画,我们需要使用 flutter 中存在的覆盖层。关联

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

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