如何在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的来源，看看是否可以使用与FlipTransition类似的方式制作自己的Transform。