【问题标题】:Animate route that is going out / being replaced正在出去/被替换的动画路线
【发布时间】:2018-06-16 17:47:22
【问题描述】:

我通过以下实现做了简单的淡入淡出页面过渡:

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

当新页面进入时它会起作用,它会淡入新页面,但旧页面仍然可见,而新页面不是 100% 淡入。

理想情况下,我希望它以一种方式工作,即前一页首先淡出,然后新一页淡入。我知道我可以以某种方式使用 secondaryAnimation ,但目前无法弄清楚。我小时候尝试嵌套另一个 FadeTransition 并使用它,但在这种情况下,我的路线只是迅速淡入并消失(因为次要现在是 0)

编辑:这不是使用MaterialApp,它基于WidgetsApp

Edit2:从路由器的设置中发现我也可以使用isInitialRoute,我可以在这里应用它吗?

【问题讨论】:

    标签: dart flutter


    【解决方案1】:

    来自 Flutter 源码注解:

    /// 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.
    

    我的个人建议是当文档模糊或缺少在代码中搜索时;)

    最好的

    【讨论】:

    • 我试过他们使用secondaryAnimation的例子,但它坏了。将 TweenOffset 和 AlignmentTween 更新为 Tween 以消除编译错误,但仍然不起作用。我不明白它如何知道要为哪个小部件设置动画,因为只有传入的新小部件被声明并用作子参数。我可能需要在一个全新的项目中尝试这个,但你让它工作了吗?我想得到当前路线在新路线进来的同时在 Z 位置向后平移的效果。
    猜你喜欢
    • 1970-01-01
    • 2021-01-26
    • 2020-12-29
    • 1970-01-01
    • 1970-01-01
    • 2019-03-13
    • 2017-09-03
    • 2018-08-17
    • 1970-01-01
    相关资源
    最近更新 更多