在颤振中启动一个又一个英雄动画

Question

我正在构建在列表/网格中显示项目的图库应用程序，并在按下它时切换到详细信息视图。我正在将英雄动画用于主图像元素，我想在英雄过渡完成后对细节视图的某些部分进行动画处理(在晶圆厂淡入淡出，在文本中滑动等)。

是否有任何属性或回调可用于侦听英雄动画更新并在 smth 中启动我的动画，如onAnimationEnd？

我知道我可以"破解"解决方案并在视图被推送到屏幕后 300 毫秒(据我所知，这是英雄动画的默认持续时间)开始我的淡入淡出动画，但感觉不对。

Answer 1

你试过使用未来吗？

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

计算主图动画的时间量，并将其设置为"持续时间"的延迟。

调用 initState() 中的函数

然后，您可以将小部件包装在像这样的动画不透明度小部件中，直到延迟时间，一切都会在那里，它们只是被隐藏起来，一旦结束，它就会看起来像淡入。

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

您可以更改不同的曲线和持续时间

Answer 2

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

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