Question

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

我想要一个过渡，该过渡类似于在材料设计指南中针对顶级对等过渡的情况。

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

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

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

Answer 1

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

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);或TickerProviderStateMixin）。

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

SingleTickerProviderStateMixin

最终您通过调用

开始动画

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

根据您的构建方法。

不要忘记从控件状态的处置方法中处置控制器。

您可能想构造一个通用的衰落小部件，它是一个有状态的小部件，其状态继承了_animationController?.reset(); _animationController?.forward();的某种风格。

如果您希望将动画作为路由过渡，请查看here。此处给出的示例使用了幻灯片过渡，但是应该容易地用FadeTransitions替换幻灯片以进行淡入和淡出。

编辑：在Flutter Widget库中找到了AnimatedSwitcher窗口小部件，该窗口正是您想要的。这是我所说的通用小部件。

颤动中的顶级过渡

1 个答案: