淡出淡入的AnimatedCrossFade效果

Question

AnimatedCrossFade 是我最喜欢使用的 Flutter 控件之一，它非常流畅和方便。

我知道这与控件的预期用途相矛盾，但我想知道是否有一种方法可以调整它，使其不在其子项之间进行交叉淡化，而是先将其中一个淡出，然后再将另一个淡入。

如果使用此控件无法实现此操作，那么最好的方法是什么？

- countpablo

---

@pskink AnimatedSwitcher 只在切换现有小部件的状态时有效，而不是在其子级依赖于布尔值时有效。 - countpablo

抱歉如果之前表述不够清晰，我的意思是当AnimatedSwitcher的子组件依赖于某个布尔值时（例如：AnimatedSwitcher(child: someBool ? WidgetA : WidgetB)）。 - countpablo

好的，事实证明这确实有效，但只有当两个小部件足够不同（刚刚测试了非常不同的小部件）时才有效。我的小部件高度略有不同，并且颜色也不同。 - countpablo

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,

如果您想要更多的花哨曲线，您可以在自定义曲线类中保留该类型的内部曲线，并在第一个返回值中将t*2传递到其中。

- countpablo