如何在颤动中相对于前一个路由转换动画 [英] How to animate routes transtion relative to the previous one in flutter

问题描述

我正在尝试在路由上实现类似 coupertino 页面转换的功能.(简要介绍如何定位先前和当前路线并为其设置动画).

I am trying to achieve something like that coupertino page transition on routing. (briefly how to target and animate both the previous and current routes).

我检查了这个包 page_transition，但是使用的逻辑似乎是因为它重建了以前的上下文小部件并尝试破解新路线中的动画.

I checked this package page_transition, but the logic used seems off as its rebuilding the previous context widget and tries to hack an animation in the new route.

即使在文档中，它似乎也只是关于导航堆栈顶部的路线.

even in the documentation it seems to only be about the route on top of the navigation stack.

你最终会得到这样的结果:

and you end up with something like this:

 Navigator.of(context).push(AnimatedRoute(
                      prevPage: widget, nextPage: Page2()));

class AnimatedRoute extends PageRouteBuilder {

  final Widget nextPage;
  final Widget prevPage;

  AnimatedRoute({this.prevPage, this.nextPage}) : super(
    transitionDuration: Duration(milliseconds: 700),
    pageBuilder: (
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
    ) {
      return nextPage;
    },
    maintainState: true,
    transitionsBuilder: (
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
    ) {
      return Material(
        child: Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            SlideTransition(
              position: Tween<Offset>(
                begin: const Offset(0.0, 0.0),
                end: const Offset(-0.3, 0.0),
              ).animate(animation),
              child: prevPage,
            ),

            SlideTransition(
              position: Tween<Offset>(
                begin: const Offset(1.0, 0.0),
                end: Offset.zero,
              ).animate(animation),
              child: AnimatedBuilder(
                animation: animation,
                builder: (c, w) {
                  return Material(
                    shadowColor: Colors.black,
                    // elevation: 10.0 * animation.value,
                    child: nextPage
                  );
                },
              ),
            )
          ],
        ),
      );
    }
  );
}

除了重建之外，这也没有考虑旧小部件的状态.

apart from the rebuild this also doesn't take in account the state of the older widget.

一种更好的处理方式，值得赞赏

a better way to handle that is appreciated

推荐答案

您可以使用 PageRouteBuilder 来处理您要转换的页面和要转换到的页面的转换我解释如下:

You can use PageRouteBuilder to be able to handle transition both for the page you are transitioning from and the one you are transitioning to as I explain below:

注意:pageBuilder 有 3 个参数:上下文、动画和辅助动画.animation 用于页面导航到，secondaryAnimation 用于页面导航.

Note: pageBuilder takes 3 parameters: context, animation and secondaryAnimation. animation is used when the page is navigated to and secondaryAnimation is used for when the page is navigated from.

假设我们有两个页面，A 和 B.

Suppose that we have two pages, A and B.

对于页面 A:

Navigator.of(context).push(
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) {
      return AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          return AnimatedBuilder(
            animation: secondaryAnimation,
            builder: (context, innerChild) {
              retrun Transform.scale(
                scale: (animation.value - secondaryAnimation.value),
                child: A(),
              );
            },
          );
        },
      );
    },
  ),
);

对于页面 B:

Navigator.of(context).push(
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) {
      return AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          return AnimatedBuilder(
            animation: secondaryAnimation,
            builder: (context, child) {
              return Transform.translate(
                offset: Offset(
                  1.0 - animation.value,
                  0.0,
                ),
                child: B(),
              );
            },
          );
        },
      );
    },
  ),
);

这将导致如下图所示的过渡:

This will lead to a transition like the gif below:

转换示例

(gif说明:第一页缩小，第二页像幻灯片过渡一样进来)

(gif explanation: first page moves out with scaling down and second page comes in like a slide transition)

这篇关于如何在颤动中相对于前一个路由转换动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！