我正在构建一个相册应用程序,以列表/网格形式展示项目,并在按下后转换为详细视图。 我正在使用主要图像元素的Hero动画,希望在Hero过渡完成后对详细视图的某些部分进行动画处理(例如淡入fab,文本滑入等)。
是否有任何属性或回调函数可用于侦听Hero动画更新并在类似于 onAnimationEnd
的情况下启动我的动画?
我知道我可以“hack”解决方案,并在视图推送到屏幕后300ms(据我所记,这是hero动画的默认持续时间)开始我的淡入动画,但感觉不太正确。
我正在构建一个相册应用程序,以列表/网格形式展示项目,并在按下后转换为详细视图。 我正在使用主要图像元素的Hero动画,希望在Hero过渡完成后对详细视图的某些部分进行动画处理(例如淡入fab,文本滑入等)。
是否有任何属性或回调函数可用于侦听Hero动画更新并在类似于 onAnimationEnd
的情况下启动我的动画?
我知道我可以“hack”解决方案,并在视图推送到屏幕后300ms(据我所记,这是hero动画的默认持续时间)开始我的淡入动画,但感觉不太正确。
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"),
],
),
),
),
我认为你的问题可以通过扩展下面的类来解决。 https://api.flutter.dev/flutter/widgets/NavigatorObserver-class.html
查看HeroController了解更多信息。 https://api.flutter.dev/flutter/widgets/HeroController-class.html
ModalRoute.of(context).transitionDuration
延迟动画,那么这种方法就不会像 hack 一样了。至少它会按照正确的时间延迟。 - spkersten