【问题标题】:Need delay between two Flutter transitions in AnimatedSwitcherAnimatedSwitcher 中的两个 Flutter 转换之间需要延迟
【发布时间】:2020-11-17 01:48:44
【问题描述】:

我需要在 AnimatedSwitcher transitionBuilder 中的两个转换之间有一个短暂的延迟。我尝试了 Future.delayed,但它没有返回小部件。我应该使用什么?

AnimatedSwitcher(
                          duration: Duration(seconds: 1),
                          transitionBuilder: (
                            Widget child,
                            Animation<double> animation,
                          ) {
                            return SlideTransition(
                              position: Tween<Offset>(
                                      begin: Offset(0.0, 0.1),
                                      end: Offset(0, 0))
                                  .animate(animation),
                              child: FadeTransition(
                                opacity: animation,
                                child: child,
                              ),
                            );
                          },
                          child: quizStep(quiz, screenWidth),
                        ),

FadeTransition 必须在 SlideTransition 之后几秒钟执行。

【问题讨论】:

  • 你用过Interval class
  • 我尝试使用 Interval 类,但未能在上面的代码中实现.. 能否请您帮忙?
  • 好的,可以分享完整代码吗?
  • 抱歉,Mohammed 仅使用给出的代码解释了 Interval 类。谢谢。

标签: flutter flutter-animation flutter-web


【解决方案1】:

在您使用动画进行淡入淡出和缩放的情况下,动画将同时开始和停止。 但是你可以使用交错动画,你可以在这里找到更多关于它的信息:https://flutter.dev/docs/development/ui/animations/staggered-animations

解决办法是

              FadeTransition(
                opacity: Tween<double>(begin: 0.0, end: 1.0).animate(
                  CurvedAnimation(
                    parent: animation,
                    curve: Interval(0.5, 1.0),
                  ),
                ),
                child: child,
              ),

区间曲线是告诉动画什么时候开始,什么时候结束。 该值应介于 0.0 和 1.0 之间,因为它是动画值,0.5 将在动画时间的一半(半秒)后开始动画,您应该调整它并找到适合您需要的最佳值。

【讨论】:

  • 谢谢...但这会在切换两个小部件之间产生延迟。我需要两个过渡 FadeTransition 和 SlideTransition 之间的延迟..
  • 对不起,我没有先得到你的问题,我会编辑答案
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-02-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多