Question

单击时，我需要使模式路线动画从底部出现，但是我唯一要做的动画是淡入淡出和旋转动画。

这是一个覆盖层，当用户单击按钮进行解释时会被调用。

这是构建页面

@override        
Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: SafeArea(
        child: _buildOverlayContent(context),
      ),
    );
  }

这是构建转换：

      @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    // You can add your own animations for the overlay content
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }

我曾尝试从多种方式使用幻灯片过渡，但每次尝试都似乎不起作用。它要么导致错误，要么根本不起作用。

（我的尝试之一）

  Animation<Offset> animated() {


   Animation<Offset> anime;
    return anime;
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    //You can add your own animations for the overlay content
    return SlideTransition(
      position: animated(),
      child: child,
    );
  }

我该怎么办？

Answer 1

您可以使用page_transition软件包：

https://pub.dev/packages/page_transition

您可以使用bottomToTop过渡来实现这一目标。

Navigator.push(
  context, 
  PageTransition(
    type: PageTransitionType.bottomToTop, 
    child: DetailScreen()
  )
);

颤振如何从底部产生模态路线动画

1 个答案: