在颤动中英雄动画之后开始动画

Posted 2023-02-23

【中文标题】在颤动中英雄动画之后开始动画

【英文标题】：Start animation after hero animation in flutter

【发布时间】：2019-09-28 12:17:20

【问题描述】：

我正在构建画廊应用程序，该应用程序在列表/网格中显示项目，并在按下它时转换到详细视图。我正在为主要图像元素使用英雄动画，并且我想在英雄转换完成后为细节视图的部分设置动画（淡入淡出，在文本中滑动等）。

是否有任何属性或回调可以用来监听英雄动画更新并像onAnimationEnd 一样开始我的动画？

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

【问题讨论】：

只需在您要推入的小部件的 initState() 中启动动画即可。

如果你将动画延迟ModalRoute.of(context).transitionDuration，那就少了一点黑客攻击。至少会延迟适当的时间。

【参考方案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"),
      ],
    ),
  ),
),

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