带不透明度的颤振动画可见性

Question

Flutter可见小部件允许隐藏和禁用其中包含的所有内容。然而，我想要动画的不透明度以及调用可见性。使用Visibility小部件将覆盖动画不透明度。基于我对其他语言的了解，这是预料之中的。

是否有一个简单方便的方法来实现动画的不透明度和可见性。这将使生活比设置计时器更简单。

下面的例子使用了一个hasAccess类型的bool，使用Provider作为状态管理。

child: Stack(
children: [
Visibility(
visible: hasAccess ? false : true,
child: AnimatedOpacity(
duration: Duration(milliseconds: 400),
opacity: hasAccess ? 0 : 1,
child: Text('Not logged in'),
)), 
Visibility(
visible: hasAccess ? true : false,
child: AnimatedOpacity(
duration: Duration(milliseconds: 400),
opacity: hasAccess ? 1 : 0,
child: Text('Is logged in'),
),
), 
],
)

Answer 1

我希望这能解决问题。您需要在可见度小部件中设置maintainAnimation=true和maintainState=true。

Visibility(
visible: hasAccess,
maintainAnimation: true,
maintainState: true,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn,
opacity: hasAccess ? 1 : 0,
child: Text('abc')
)
)

Answer 2

Visibility和Opacity是两种完全不同的东西。

Opacity可以用来改变它的子控件的不透明度。AnimatedOpacity允许这样的动画，FadeTransition允许这样的过渡。然而，不透明度只是简单地处理不透明度。即使你看不见，这个孩子仍然被画在屏幕上。它仍然会响应指针事件，并且仍然会占用计算资源。

Visibility类是包括IgnorePointer在内的各种其他类的合并。根据给定的设置，它将用一个占用最小资源且没有内容的小部件完全替换子控件(默认为SizedBox.shrink())，或者将其移动到OffScreen或简单地防止指针事件。它将使它在没有任何动画的情况下始终不可见。它可以有效地完全替换Widget，将其移出屏幕或禁用指针事件，同时始终使子控件不可见。

使用AnimatedOpacity或FadeTransition将允许您动画不透明度。动画完成后，子图层的不透明度为0，这时就该使用Visibility了。你可以通过监听器、计时器或任何你能想到的方法来找到动画的状态。

你会发现像AnimatedOpacity这样的小部件也有回调函数。当动画完成时，您可以使用其中一个函数。例如，您可以创建一个名为_visible的状态作为bool。然后在AnimatedOpacity动画完成后将其设置为false。然后将AnimatedOpacity的子属性包装在Visibility Widget中，将其属性设置为_visible状态bool。

Visibility(visibility: _visible, child: <yourChildWidget>);

Answer 3

如果你想要一个简单的解决方案，那么使用这个:

AnimatedOpacity(
// If the widget is visible, animate to 0.0 (invisible).
// If the widget is hidden, animate to 1.0 (fully visible).
opacity: _visible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 500),
// The green box must be a child of the AnimatedOpacity widget.
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
)

原链接:https://docs.flutter.dev/cookbook/animation/opacity-animation