dart - 如何在Flutter中自定义带有翻转动画的AnimatedCrossFade？

Question

我想在按下按钮时在 2 个卡片小部件之间切换。我发现 AnimatedCrossFade 的作用完全相同，但切换动画是渐隐的。我想在切换的时候做一个翻转动画。我该怎么做？

Answer 1

类似于:

...
AnimatedSwitcher(
  duration: Duration(milliseconds: 400),
  transitionBuilder: (child, animation) => SizeTransition(
    sizeFactor: animation.drive(CurveTween(curve: 
       //these intervals might be wrong, but the point is
       //you can differentiate what is transitioning using the key
       child.key == Key("flipped")
         ? Interval(0.5, 1.0)
         : Interval(0.0, 0.0)
    )),
    child: child,
  ),
  child: myState.isButtonFlipped
    ? FlippedWidget(
      key: Key("flipped"),
    )
    : MyButton(
      key: Key("notFlipped"),
    ),
),

如果您想要不同的过渡，请查看 SizeTransition 的源代码，看看您是否可以使用 Transform< 以类似的方式制作自己的 FlipTransition/.