带淡出然后淡入的动画交叉淡入淡出

Question

AnimatedCrossFade 是我最喜欢使用 Flutter 的小部件之一，它非常漂亮而且非常方便。

我知道这与小部件的用途相矛盾，但我想知道是否有办法对其进行调整，使其不会在其子项之间交叉淡入淡出，而是淡出其中一个然后在另一个淡出。

如果无法使用此小部件执行此操作，最好的方法是什么？

Answer 1

找到了我正在寻找的解决方案。

“像这样的东西很管用：

class LinearHalfCurve extends Curve {
   @override
   double transformInternal(double t) {
      if(t < 0.5) {
        return t*2; // goes from 0-1.0 when t is 0-0.5
      }
      return 1.0; // cap to 1.0 when t is above 0.5
    }
}

然后在您的 AnimatedCrossFade 集中：

    firstCurve: LinearHalfCurve(),
    secondCurve: LinearHalfCurve().flipped,

如果您想要更多花哨的曲线，您可以在自定义曲线 class 中保留该类型的内部曲线，并在第一个 return 中将 t*2 传递给该曲线。"= 12=]

带淡出然后淡入的动画交叉淡入淡出

AnimatedCrossFade with Fade Out then Fade In

fade

dart

flutter

flutter-animation