动画路线出去/被替换 [英] Animate route that is going out / being replaced

问题描述

我通过以下实现进行了简单的淡入淡出页面转换：

I made simple fade page transition via following implementation:

return new PageRouteBuilder(
  opaque: true,
  pageBuilder: (BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return new FadeTransition(opacity: animation, child: route);
});

当新页面进入时它会起到欺骗作用，它会在新页面中消失，但是旧页面仍然存在可见，而新页面不是100％淡入。

It does the trick when new page comes in, it fades in new page, but old one is still visible while new one is not 100% faded in.

理想情况下，我希望这种工作方式是先淡出上一页，然后淡入新页面。我知道我可以以某种方式使用secondaryAnimation，但目前无法弄清楚。我曾尝试将另一个 FadeTransition 作为一个孩子嵌套并使用它，但是在这种情况下，我的路线会很快消失并消失（因为现在辅助路径为0）

Ideally I'd like this to work in a way where previous page fades out first, then new one fades in. I know that I can use secondaryAnimation for this somehow, but can't currently figure it out. I tried nesting another FadeTransition as a child and using it, but in this case my route just fades in quickly and goes away (as secondary is now 0)

编辑：这未使用 MaterialApp ，它基于 WidgetsApp

Edit: this is not using MaterialApp, its based on WidgetsApp

Edit2 ：发现我也可以使用 isInitialRoute

Edit2: Found out that I can also use isInitialRoute from settings of the router, can I apply this here somehow?

推荐答案

来自Flutter源代码注释：

From Flutter source code annotations:

/// Signature for the [PageRouteBuilder] function that builds the route's
/// transitions.
///
/// See [ModalRoute.buildTransitions] for complete definition of the parameters.
typedef Widget RouteTransitionsBuilder(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child);

并进一步：

  /// We've used [PageRouteBuilder] to demonstrate the [buildTransitions] method
  /// here. The body of an override of the [buildTransitions] method would be
  /// defined in the same way.
  ///
  /// When the [Navigator] pushes a route on the top of its stack, the
  /// [secondaryAnimation] can be used to define how the route that was on
  /// the top of the stack leaves the screen. Similarly when the topmost route
  /// is popped, the secondaryAnimation can be used to define how the route
  /// below it reappears on the screen. When the Navigator pushes a new route
  /// on the top of its stack, the old topmost route's secondaryAnimation
  /// runs from 0.0 to 1.0.  When the Navigator pops the topmost route, the
  /// secondaryAnimation for the route below it runs from 1.0 to 0.0.
  ///
  /// The example below adds a transition that's driven by the
  /// [secondaryAnimation]. When this route disappears because a new route has
  /// been pushed on top of it, it translates in the opposite direction of
  /// the new route. Likewise when the route is exposed because the topmost
  /// route has been popped off.
  ///
  /// ```dart
  ///   transitionsBuilder: (
  ///       BuildContext context,
  ///       Animation<double> animation,
  ///       Animation<double> secondaryAnimation,
  ///       Widget child,
  ///   ) {
  ///     return new SlideTransition(
  ///       position: new AlignmentTween(
  ///         begin: const Offset(0.0, 1.0),
  ///         end: Offset.zero,
  ///       ).animate(animation),
  ///       child: new SlideTransition(
  ///         position: new TweenOffset(
  ///           begin: Offset.zero,
  ///           end: const Offset(0.0, 1.0),
  ///         ).animate(secondaryAnimation),
  ///         child: child,
  ///       ),
  ///     );
  ///   }
  /// ```
  ///
  /// In practice the `secondaryAnimation` is used pretty rarely.
  ///
  /// The arguments to this method are as follows:
  ///
  ///  * `context`: The context in which the route is being built.
  ///  * [animation]: When the [Navigator] pushes a route on the top of its stack,
  ///    the new route's primary [animation] runs from 0.0 to 1.0. When the [Navigator]
  ///    pops the topmost route this animation runs from 1.0 to 0.0.
  ///  * [secondaryAnimation]: When the Navigator pushes a new route
  ///    on the top of its stack, the old topmost route's [secondaryAnimation]
  ///    runs from 0.0 to 1.0.  When the [Navigator] pops the topmost route, the
  ///    [secondaryAnimation] for the route below it runs from 1.0 to 0.0.
  ///  * `child`, the page contents.
  ///
  /// See also:
  ///
  ///  * [buildPage], which is used to describe the actual contents of the page,
  ///    and whose result is passed to the `child` argument of this method.

我的个人建议是文档模糊不清或缺少代码搜索时;）

My personal suggestion is when doc is vague or missing to search in the code ;)

最佳

这篇关于动画路线出去/被替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！