如何在 Flutter 中使用英雄过渡期间未运行的动画/动画？

Question

我有一张描绘产品的卡片网格。当点击一张卡片时，我希望它翻转（围绕 Y 轴）以显示显示细节的“另一面”，同时增长以填充屏幕。

• 持续时间 0.0 - 卡片显示正面且处于网格视图中
• 持续时间 0.5 - 卡为全屏且垂直于屏幕的 50%（正面朝右，“背面”朝左）
• 持续时间 1.0 - 卡完全展开并显示“背面”卡。

我已经成功地使翻转动画正常工作，但我无法弄清楚如何让它在英雄过渡期间运行。从这篇文章来看，我似乎需要利用flightShuttleBuilder才能为叠加层设置动画，但我的动画在过渡期间不会运行：

return Hero(
  tag: 'test',
  flightShuttleBuilder: (
    BuildContext flightContext,
    Animation<double> animation,
    HeroFlightDirection flightDirection,
    BuildContext fromHeroContext,
    BuildContext toHeroContext,
  ) {
    final Hero toHero = toHeroContext.widget;
    return Transform(
      transform: Matrix4.identity()..rotateY(-pi * animation.value),
      alignment: FractionalOffset.center,
      child: toHero,
    );
  },
  child: Card(...),
);

Answer 1

事实证明，flightShuttleBuilder仅在过渡的开始和结束时发出值，而不是在整个动画中发出值。从GitHub 上的这个问题来看，这显然是预期的行为。

解决方法是创建您自己的过渡，该过渡从AnimatedWidget; 它将正常发出值并可用于flightShuttleBuilder：

class FlipcardTransition extends AnimatedWidget {
  final Animation<double> flipAnim;
  final Widget child;

  FlipcardTransition({@required this.flipAnim, @required this.child})
      : assert(flipAnim != null),
        assert(child != null),
        super(listenable: flipAnim);

  @override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
        ..rotateY(-pi * flipAnim.value),
      alignment: FractionalOffset.center,
      child: child,
    );
  }
}

...

flightShuttleBuilder: (BuildContext flightContext,
  Animation<double> animation,
  HeroFlightDirection flightDirection,
  BuildContext fromHeroContext,
  BuildContext toHeroContext,) {
    final Hero toHero = toHeroContext.widget;
    return FlipcardTransition(
      flipAnim: animation,
      child: toHero,
    );
},