颤振中的顶级转换答案

【问题标题】：Top level transitions in flutter颤振中的顶级转换
【发布时间】：2019-05-23 01:31:18
【问题描述】：

我想创建一个布局，其中有一个BottomNavigationBar，用于在五个顶级视图之间导航。

我想要一个类似于顶级对等转换的材料设计指南中的转换。

Link

首先当前视图淡出，然后选择的视图淡入。问题是flutter在补间动画中似乎没有超过两个步骤，这意味着我无法从1.0更改不透明度到 0.0，然后回到 1.0（如 CSS @keyframes）。

有谁知道我可以如何做到这一点？我应该使用 Tween 以外的东西吗？

我尝试使用多个 Tween 动画并更改 Opacity 小部件的 opacity 值 mid-animation，但这样做甚至没有动画。

【问题讨论】：

标签： dart flutter material-design

【解决方案1】：

您必须为此使用堆栈。此堆栈应包含要淡出的小部件和要淡入的小部件。创建两个由同一动画控制器控制的 Tweens，一个淡出（从 1.0 到 0.0），一个用于淡入。在 initState() 中执行此操作有状态小部件的状态：

_animationController =
    AnimationController(duration: Duration(milliseconds: 500), vsync: this);
_fadeIn = Tween(begin: 0.0, end: 1.0).animate(_animationController);
_fadeOut = Tween(begin: 1.0, end: 0.0).animate(_animationController);

（State 需要使用 mixin TickerProviderStateMixin 或 SingleTickerProviderStateMixin）。

使用小部件 a 淡出和 b 淡入，您的构建方法返回的小部件将如下所示：

Stack(children: [
  FadeTransition(
    child: a,
    opacity: _fadeOut,
  ),
  FadeTransition(
    child: b,
    opacity: _fadeIn,
  )
]);

最终你通过调用来启动动画

_animationController?.reset();
_animationController?.forward();

来自您的构建方法。

不要忘记从小部件状态的 dispose 方法中释放控制器。

您可能想要构建一个通用的淡入淡出小部件，它是一个有状态的小部件，其状态继承了TickerProviderMixin 的某种风格。

如果你想拥有像路由过渡这样的动画，那么看看here。此处给出的示例使用了幻灯片过渡，但应该很容易将其替换为 FadeTransitions 以淡出和淡入。

编辑：在 Flutter 小部件库中找到小部件 AnimatedSwitcher，它完全符合您的要求。这是我所说的通用小部件。

【讨论】：