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

Question

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

• 持续时间 0.0 - 卡片显示正面并在网格视图中
• 持续时间 0.5 - 卡片在全屏的 50% 处垂直于屏幕（正面朝右，“背面”朝左）
• Duration 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,
    );
},

Answer 2

正如马特所说，默认行为只发出开始和结束值，所以我们应该听动画以获得完整的可动画小部件。 下面是一个例子：

Hero(
  tag: "YourHeroTag",
  flightShuttleBuilder: (BuildContext flightContext,
    Animation<double> animation,
    HeroFlightDirection flightDirection,
    BuildContext fromHeroContext,
    BuildContext toHeroContext,) {
      return AnimatedBuilder(
        animation: animation,
        builder: (context, value) {
          return Container(
            color: Color.lerp(Colors.white, Colors.black87, animation.value),
          );
        },
      );
  },
  child: Material( // Wrap in Material to prevent missing theme, mediaquery, ... features....
    // ...
  )
)

建议包裹在Material小部件中以防止意外丢失样式。