flutter 如何使一个新的传入子页面淡入和缩放，因为它过渡到场景

eaf3rand 于 2023-05-19 发布在 Flutter

关注(0)|答案(1)|浏览(166)

我试图了解如何在Flutter中使用AnimatedSwitcher来创建两个页面之间的过渡动画，我想要的是新页面从中间慢慢淡出屏幕，随着页面的扩大，它的不透明度变得更加清晰，最终填满屏幕。
我已经尝试了多种代码，但这一个似乎最接近预期的工作，除了正在褪色的页面是旧的，同时新的在后台褪色。这不是我想要的，我需要一个新的淡出屏幕，因为它的规模，这里是一个慢下来的GIF的这种困境。this is the current transition for reference代码如下：

return AnimatedSwitcher(
          duration: const Duration(milliseconds: 4000),
          transitionBuilder: (widget, animation) {
            return Stack(
              children: [
                FadeTransition(
                  opacity: animation,
                  child: widget,
                ),
                ScaleTransition(
                  scale: animation,
                  filterQuality: FilterQuality.high,
                  child: widget,
                ),
              ],
            );
          },
          switchOutCurve: const Threshold(0),
          child: newWidget,
          //
        );

flutter

来源：https://stackoverflow.com/questions/76259186/how-to-make-a-new-incoming-child-page-fade-in-and-scale-up-as-it-transitions-int

1条答案

按热度按时间

x759pob21#

下面是一个制作动画的例子：
Link to the output

1.创建缩放页面过渡

class FadeInAndScalePageRoute<T> extends PageRouteBuilder<T> {
  final Widget child;

  FadeInAndScalePageRoute({required this.child})
      : super(
          // change duration to suit your need
          transitionDuration: Duration(milliseconds: 500),
          pageBuilder: (context, animation, secondaryAnimation) => child,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return ScaleTransition(
              scale: Tween<double>(begin: 0.5, end: 1.0).animate(
                CurvedAnimation(
                  parent: animation,
                  curve: Curves.fastOutSlowIn,
                ),
              ),
              child: FadeTransition(
                opacity: Tween<double>(begin: 0.0, end: 1.0).animate(
                  CurvedAnimation(
                    parent: animation,
                    curve: Curves.fastOutSlowIn,
                  ),
                ),
                child: child,
              ),
            );
          },
        );
}

2.使用方法

Navigator.of(context).push(
  FadeInAndScalePageRoute(
    // replace with your page
    child: Scaffold(
        appBar: AppBar(title: Text('New Page'),),
        body: Center(child: Text('My New Page'),),
      ),
    ),
);

赞(0）回复(0）举报 2023-05-19

我来回答

flutter 如何使一个新的传入子页面淡入和缩放，因为它过渡到场景

1条答案

1.创建缩放页面过渡

2.使用方法

相关问题

热门标签

最新问答