如何在 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小部件中以防止意外丟失樣式。