如何在 Flutter 中创建视差页面过渡？

Question

我正在尝试在颤动中创建视差页面过渡，在新页面向上滑动时，当前页面向上滑动。我已经看到 Spotify、Reddit 应用程序甚至三星原生警报应用程序（见下文）使用的这种转换。

如果有人知道如何实现这种效果（附代码示例），我将不胜感激。

Answer 1

看看这个可以在DartPad上运行的sn-p，看看SlideBottomUpRoute，它是管理页面之间过渡动画的类：

import 'package:flutter/material.dart';

class SlideBottomUpRoute extends PageRouteBuilder {
  SlideBottomUpRoute(
      {@required this.enterWidget,
      @required this.oldWidget,
      RouteSettings settings})
      : super(
          transitionDuration: const Duration(milliseconds: 350),
          settings: settings,
          pageBuilder: (context, animation, secondaryAnimation) => enterWidget,
          transitionsBuilder: (context, animation, secondaryAnimation, child) =>
              Stack(
            children: <Widget>[
              SlideTransition(
                  position: Tween<Offset>(
                    begin: Offset.zero,
                    end: const Offset(0, -1),
                  ).animate(
                    CurvedAnimation(
                        parent: animation, curve: Curves.fastOutSlowIn),
                  ),
                  child: oldWidget),
              SlideTransition(
                  position: Tween<Offset>(
                    begin: const Offset(0, 1),
                    end: Offset.zero,
                  ).animate(
                    CurvedAnimation(
                        parent: animation, curve: Curves.fastOutSlowIn),
                  ),
                  child: enterWidget),
            ],
          ),
        );

  final Widget enterWidget;
  final Widget oldWidget;
}

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              SlideBottomUpRoute(enterWidget: SecondRoute(), oldWidget: this),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

结果如下：

您可以修改SlideBottomUpRoute中动画中的Offset，以改变页面在过渡中的移动方式。