在Flutter中实现英雄动画后开始其他动画

Question

我正在构建一个相册应用程序，以列表/网格形式展示项目，并在按下后转换为详细视图。 我正在使用主要图像元素的Hero动画，希望在Hero过渡完成后对详细视图的某些部分进行动画处理（例如淡入fab，文本滑入等）。

是否有任何属性或回调函数可用于侦听Hero动画更新并在类似于 onAnimationEnd 的情况下启动我的动画？

我知道我可以“hack”解决方案，并在视图推送到屏幕后300ms（据我所记，这是hero动画的默认持续时间）开始我的淡入动画，但感觉不太正确。

- Filip Zymek

---

只需在将要推入的小部件的initState()中启动动画即可。 - Son of Stackoverflow

如果您通过 ModalRoute.of(context).transitionDuration 延迟动画，那么这种方法就不会像 hack 一样了。至少它会按照正确的时间延迟。 - spkersten

Answer 1

你尝试过使用 Future 吗？

double opacity = 0;

Future < void > showAfter() async {
  await Future.delayed(Duration(seconds: 3), () {
    print('delay completed');
  });
  setState(() {
    opacity = 1;
  });
}

计算英雄动画的时间并将其设置为持续时间的延迟。

在initState()中调用该函数。

然后，您可以像这样将小部件包装在AnimatedOpacity小部件中，在延迟时间内，所有内容都将存在，只是被隐藏了，一旦结束，它将出现像淡入一样。

AnimatedOpacity(
  duration: Duration(milliseconds: 300),
  opacity: opacity,
  child: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: < Widget > [
        Text("Hello World"),
      ],
    ),
  ),
),

你可以使用不同的曲线和持续时间。

- Nadeem Siddique

Answer 2

我认为你的问题可以通过扩展下面的类来解决。 https://api.flutter.dev/flutter/widgets/NavigatorObserver-class.html

查看HeroController了解更多信息。 https://api.flutter.dev/flutter/widgets/HeroController-class.html

- Sajjad