[译] 关于 Flutter 页面路由过渡动画，你所须要知道的一切

时间 2019-11-06

原文原文链接

原文地址：Everything you need to know about Flutter page route transition

原文做者：Divyanshu Bhargava

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：EmilyQiRabbit

校对者：Charlo-O

在使用 Flutter 的时候，咱们都知道从一个路由跳转到另外一个这件事很是简单。咱们只须要作 push 和 pop 的操做便可。前端

push 操做：android

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
复制代码

pop 操做：ios

Navigator.pop(context);
复制代码

就这么简单。可是这样作，路由跳转就是无聊的页面切换，彻底没有动画效果 😦git

当咱们在 Winkl 开始第一次应用动画效果，咱们意识到，页面跳转的过渡效果可让你的用户交互界面变得很好看。若是你想要一个像 iOS 上那样的滑动页面切换，你能够用 CupertinoPageRoute。只有这个，没有其余的了。github

Navigator.push(
    context, CupertinoPageRoute(builder: (context) => Screen2()))
复制代码

可是，对于用户自定义的过渡效果，Flutter 提供了不一样的方案：动画组件。下面咱们一块儿来看看如何应用它。后端

咱们知道，Navigator.push 接受两个参数 (BuildContext context, Route route)。咱们能够使用一些过渡动画来建立自定义的页面路由跳转。咱们先从一些简单的例子开始，好比滑动过渡。bash

滑动过渡

首先，咱们要扩充类 PageRouteBuilder，而后定义 transitionsBuilder，它将返回滑动过渡组件。这个滑动过渡组件将使用类型 Animation 的位置信息，咱们将会使用 Tween 来给出动画开始和结束的偏移量。ide

import 'package:flutter/material.dart';

class SlideRightRoute extends PageRouteBuilder {
  final Widget page;
  SlideRightRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              SlideTransition(
                position: Tween<Offset>(
                  begin: const Offset(-1, 0),
                  end: Offset.zero,
                ).animate(animation),
                child: child,
              ),
        );
}
复制代码

咱们如今就能够像这样使用 SlideRightRoute ，代替了以前的 MaterialPageRoute。学习

Navigator.push(context, SlideRightRoute(page: Screen2()))
复制代码

代码运行的效果是...区块链

代码很是简单的对吧？你能够经过修改偏移量 offset 来改变滑动过渡的方向。

缩放过渡

缩放过渡会经过改变组件的大小来完成动画效果。你也能够经过修改 CurvedAnimation 的 curves 来改变更画。下面这个例子我使用的是 Curves.fastOutSlowIn。

import 'package:flutter/material.dart';

class ScaleRoute extends PageRouteBuilder {
  final Widget page;
  ScaleRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              ScaleTransition(
                scale: Tween<double>(
                  begin: 0.0,
                  end: 1.0,
                ).animate(
                  CurvedAnimation(
                    parent: animation,
                    curve: Curves.fastOutSlowIn,
                  ),
                ),
                child: child,
              ),
        );
}
复制代码

代码运行的效果是...

旋转过渡

旋转过渡会以转动做为组件的动画。你也能够为你的 PageRouteBuilder 加入 transitionDuration。

import 'package:flutter/material.dart';

class RotationRoute extends PageRouteBuilder {
  final Widget page;
  RotationRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionDuration: Duration(seconds: 1),
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              RotationTransition(
                turns: Tween<double>(
                  begin: 0.0,
                  end: 1.0,
                ).animate(
                  CurvedAnimation(
                    parent: animation,
                    curve: Curves.linear,
                  ),
                ),
                child: child,
              ),
        );
}
复制代码

代码运行的效果是...

大小过渡

import 'package:flutter/material.dart';

class SizeRoute extends PageRouteBuilder {
  final Widget page;
  SizeRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              Align(
                child: SizeTransition(
                  sizeFactor: animation,
                  child: child,
                ),
              ),
        );
}
复制代码

代码运行的效果是...

渐变过渡

import 'package:flutter/material.dart';

class FadeRoute extends PageRouteBuilder {
  final Widget page;
  FadeRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
                opacity: animation,
                child: child,
              ),
        );
}
复制代码

代码运行的效果是...

棒棒哒！！ 如今咱们学习过了全部基础的过渡效果。

如今咱们来实践一些更高级的。若是在进入页面和离开页面这两个路由跳转的时候都想要动画该怎么作呢？咱们能够使用堆栈过渡动画（stack transition animations），并应用于这两个路由跳转上。一个例子就是滑入新页面，而后划出旧页面。这是我最喜欢的过渡动画了 ❤️。咱们来看看代码是如何实现的。

import 'package:flutter/material.dart';

class EnterExitRoute extends PageRouteBuilder {
  final Widget enterPage;
  final Widget exitPage;
  EnterExitRoute({this.exitPage, this.enterPage})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              enterPage,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              Stack(
                children: <Widget>[
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: const Offset(0.0, 0.0),
                      end: const Offset(-1.0, 0.0),
                    ).animate(animation),
                    child: exitPage,
                  ),
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: const Offset(1.0, 0.0),
                      end: Offset.zero,
                    ).animate(animation),
                    child: enterPage,
                  )
                ],
              ),
        );
}
复制代码

而后以下这样来使用 EnterExitRoute：

Navigator.push(context,
    EnterExitRoute(exitPage: this, enterPage: Screen2()))
复制代码

代码运行的效果是...

咱们也能够将多个过渡效果结合在一块儿，建立出不少神奇的效果，好比同时应用缩放和旋转。首先，建立 ScaleTransition，它的 child 属性包括了 RotationTransition，而 RotationTransition 的 child 属性则是要显示动画的页面。

import 'package:flutter/material.dart';

class ScaleRotateRoute extends PageRouteBuilder {
  final Widget page;
  ScaleRotateRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionDuration: Duration(seconds: 1),
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              ScaleTransition(
                scale: Tween<double>(
                  begin: 0.0,
                  end: 1.0,
                ).animate(
                  CurvedAnimation(
                    parent: animation,
                    curve: Curves.fastOutSlowIn,
                  ),
                ),
                child: RotationTransition(
                  turns: Tween<double>(
                    begin: 0.0,
                    end: 1.0,
                  ).animate(
                    CurvedAnimation(
                      parent: animation,
                      curve: Curves.linear,
                    ),
                  ),
                  child: child,
                ),
              ),
        );
}
复制代码

代码运行的效果是...

棒极了！这些就是关于 Flutter 页面路由过渡动画，你所须要知道的一切。亲自试着将不一样的过渡效果结合起来，创造出一些很棒的动画吧，而且别忘了和我分享你的成果。全部代码的源码可见：GitHub 仓库。

若是你喜欢本篇文章那就请点个赞吧，而且能够在 Twitter，Github 和 LinkedIn 联系我。

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。