代码之家  ›  专栏  ›  技术社区  ›  Matt

如何在颤振中使用英雄过渡期间未运行的动画/动画?

  •  0
  • Matt  · 技术社区  · 5 年前

    我有一排描述产品的卡片。当一张卡被点击时,我希望它翻转(围绕Y轴)以显示显示显示细节的“另一面”,同时增长以填充屏幕。

    • 持续时间0.0-卡显示正面,在网格视图中
    • 持续时间0.5-卡是全屏和垂直于屏幕的50%(正面面向右侧,“背面”面向左侧)
    • 持续时间1.0-卡完全展开,显示“后退”卡。

    我已经设法让一个翻转动画工作,但也有困难,如何让它也让它运行在英雄过渡。从 this article 似乎我需要利用 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(...),
    );
    
    1 回复  |  直到 5 年前
        1
  •  0
  •   Matt    5 年前

    事实证明, flightShuttleBuilder 仅在过渡的开始和结束处发射值,而不是在整个动画中。捕捉来自 this issue on GitHub 显然是预期行为。

    解决方法是创建您自己的过渡,从 AnimatedWidget ;它将正常发出值,并且可以在 飞行航天飞机制造商 :

    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,
        );
    },