如何在扑动中为与上一个相对的路线过渡设置动画 [英] 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.

结果是这样的:

 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个参数:上下文，动画和secondaryAnimation.导航到页面时使用 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(),
              );
            },
          );
        },
      );
    },
  ),
);

这将导致类似于以下gif的过渡:

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屋！