Flutter AnimatedContainer / AnimatedOpacity 延迟动画

Question

Flutter中如何延迟动画

下面提供了容器不透明度的动画。在这种情况下，我使用了 bool _reduced 来根据该 bool 变量更改动画的速度。但我不想改变速度，我只想将动画单向延迟 500 毫秒。无论如何我都看不到轻松制作动画延迟。

AnimatedOpacity(
   duration: _reduced ? Duration(milliseconds: 120) : Duration(milliseconds: 800),
   opacity: _reduced ? 0 : 1,
   child: Text('hi di hi),
}

这显然比我上面显示的要多，但本质上我想做这样的事情：

   AnimatedOpacity(
       duration: _reduced ? Duration(milliseconds: 120) : Duration(milliseconds: 120, delay: 500),
       opacity: _reduced ? 0 : 1,
       child: Text('hi di hi),
    }

Answer 1

为有状态小部件定义延迟变量：Duration delay =...;

然后当您改变不透明度的条件变为真时（例如在某些按钮的 onTap 属性内），创建一个在 [=15= 之后调用 setState 的计时器]女士：

onTap:(){
        Timer t = Timer(
            Duration(milliseconds:delay),(){
          setState((){
            _opacity = myNewValue;
          });
        });
      }

Update：既然你说你想坚持提供程序包，我假设你正在存储你的 UI 状态（在本例中是不透明度）一些 ChangeNotifier，所以在这种情况下只需将 setState 替换为对更改通知程序的调用：

 onTap:(){
            Timer t = Timer(
                Duration(milliseconds:delay),(){
              context.read<MyUIStateChangeNotifier>().setOpacity(newOpacityValue);
          }

作为旁注，这个小细节不需要更改通知器来保存它，因为它只与当前屏幕相关，更改通知器通常用于跨多个屏幕携带状态，以免每次在构造函数中传递状态

Flutter AnimatedContainer / AnimatedOpacity 延迟动画

Flutter AnimatedContainer / AnimatedOpacity Delay animation

animation

delay

flutter