给 Flutter 界面切换来点特效

时间  2019-11-08
标签 flutter 界面 切换 特效 繁體版
原文   原文链接

本文微信公众号「AndroidTraveler」首发。html

背景

咱们知道页面之间若是直接切换，会比较生硬，还会让用户以为很突兀，用户体验不是很好。git

所以通常状况下，页面之间的切换为了达到平滑过渡，都会添加动画。github

另外，有时候咱们不喜欢系统的默认动画，但愿可以自定义动画。api

基于此，本篇主要讲述如何给 Flutter 的页面切换增长自定义动画。微信

默认效果

首先咱们看看默认效果是怎样的？app

看起来彷佛还不错。代码以下：less

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return _getCenterWidget(RaisedButton(
        child: Text('Go to next page->'),
        onPressed: () {
          Navigator.of(context).push(_createRoute());
        }));
  }
}

Route _createRoute() {
  return MaterialPageRoute(builder: (BuildContext context) => Page2());
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _getCenterWidget(Text('Page2'));
  }
}

Widget _getCenterWidget(Widget child) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: child,
    ),
  );
}

能够看到建立了两个页面 MyApp 和 Page2。ide

第一个页面 MyApp 有一个按钮，第二个页面 Page2 有一个文本。动画

关键的切换就在 _createRoute() 这个路由建立方法里面。ui

咱们点进去 MaterialPageRoute 源码，能够看到

@override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    final PageTransitionsTheme theme = Theme.of(context).pageTransitionsTheme;
    return theme.buildTransitions<T>(this, context, animation, secondaryAnimation, child);
  }

加上一开始的注释，能够知道这个就是默认的界面切换过渡效果。

/// See also:
///
///  * [PageTransitionsTheme], which defines the default page transitions used
///    by [MaterialPageRoute.buildTransitions].

另外这里能够看到默认的动画时长为 300ms，并且咱们不能自定义。

@override
  Duration get transitionDuration => const Duration(milliseconds: 300);

接下来咱们就说说如何自定义咱们的界面切换过渡效果，而且自定义动画时长。

自定义动画

1. 设置 PageRouteBuilder

由上面的分析咱们知道最关键的地方在建立路由方法 _createRoute() 中。

所以咱们首先修改一下，不使用默认的 MaterialPageRoute，咱们使用 PageRouteBuilder。

Route _createRoute() {
  return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => Page2(),
      transitionsBuilder:(context, animation, secondaryAnimation, child) {
        return child;
      }
  );
}

能够看到咱们经过 pageBuilder 指定路由页面，经过 transitionsBuilder 指定页面过渡效果。

另外说明一下，这里的参数你们不用死记硬背，咱们点进去源码一看就知道了，以下：

/// Signature for the function that builds a route's primary contents.
/// Used in [PageRouteBuilder] and [showGeneralDialog].
///
/// See [ModalRoute.buildPage] for complete definition of the parameters.
typedef RoutePageBuilder = Widget Function(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation);

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

若是咱们运行代码，因为直接返回 child，因此应该是没有动画效果的。咱们运行以后，效果以下：

2. 添加 Tween 和 SlideTransition

默认的过渡效果是从右边往左过来，咱们这里自定义的演示效果就从下面往上过渡好了。

须要了解一下的是 Tween 是一个介于开始和结束值的线性插值器。

另外咱们跟进上面的 transitionsBuilder 能够知道他的第一个 animation 参数取值为 0.0 到 1.0。

咱们这边是从下往上，因此 y 轴的偏移就是由 1.0 到 0.0，表示竖直方向距离顶部一整个页面到不存在偏移（已经在顶部）。

所以关于 Tween 和 animation 咱们能够获得：

var begin = Offset(0.0, 1.0);
var end = Offset(0.0, 0.0);
var tween = Tween(begin: begin, end: end);
var offsetAnimation = animation.drive(tween);

由于咱们是要实现滑动，所以将这个肯定好的偏移动画经过 SlideTransition 处理并返回，能够获得修改后的路由代码以下：

Route _createRoute() {
  return PageRouteBuilder(
    transitionDuration: Duration(seconds: 5),
      pageBuilder: (context, animation, secondaryAnimation) => Page2(),
      transitionsBuilder:(context, animation, secondaryAnimation, child) {
        var begin = Offset(0.0, 1.0);
        var end = Offset(0.0, 0.0);
        var tween = Tween(begin: begin, end: end);
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      }
  );
}

效果以下：

看到上面效果，可能有小伙伴会有疑问。

问题一：你打开页面是从下到上我能够理解，可是返回为何是反过来的从上到下呢？

咱们跟进去 transitionsBuilder 的源码，能够看到

/// Used to build the route's transitions.
  ///
  /// See [ModalRoute.buildTransitions] for complete definition of the parameters.
  final RouteTransitionsBuilder transitionsBuilder;

咱们跟进去（经过点击）注释里面的 buildTransitions，能够看到 animation 的说明以下：

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

能够看到入栈和出栈的动画效果是相反的，而这个也符合咱们的认知。

问题二：如今的效果是从下到上，若是我要实现从上到下，是否是将 begin 和 end 的 Offset 交换一下就能够？

其实若是你理解我上面说的这句话

咱们这边是从下往上，因此 y 轴的偏移就是由 1.0 到 0.0，表示竖直方向距离顶部一整个页面到不存在偏移（已经在顶部）。

你就会知道，改为从 0.0 到 1.0 会是什么状况。

咱们改一下，经过实际演示效果来讲明。

修改后的代码以下：

Route _createRoute() {
  return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => Page2(),
      transitionsBuilder:(context, animation, secondaryAnimation, child) {
        var begin = Offset(0.0, 0.0);
        var end = Offset(0.0, 1.0);
        var tween = Tween(begin: begin, end: end);
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      }
  );
}

仅仅是 begin 和 end 的 Offset 作了交换。

运行效果以下：

虽然可以看出一点端倪，可是咱们前面讲过，默认动画时长是 300 ms，因此比较快，这样很差分析。

咱们能够经过 PageRouteBuilder 的 transitionDuration 属性来设置动画的时长。

咱们设置 3s 来看下效果，代码以下：

Route _createRoute() {
  return PageRouteBuilder(
      transitionDuration: Duration(seconds: 3),
      pageBuilder: (context, animation, secondaryAnimation) => Page2(),
      transitionsBuilder:(context, animation, secondaryAnimation, child) {
        var begin = Offset(0.0, 0.0);
        var end = Offset(0.0, 1.0);
        var tween = Tween(begin: begin, end: end);
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      }
  );
}

运行效果以下：

看到了吧，确实是反过来了，从一开始距离顶部为 0.0，到距离顶部 1.0（100%）。

那么若是我想实现从上到下进入怎么办呢？

咱们给一张图，相信看完你就懂了。

从这张图咱们知道，若是咱们从下往上，y 应该从 1.0 变到 0.0。若是要从上往下，y 应该从 -1.0 变到 0.0。

因此咱们修改代码，以下：

Route _createRoute() {
  return PageRouteBuilder(
      transitionDuration: Duration(seconds: 3),
      pageBuilder: (context, animation, secondaryAnimation) => Page2(),
      transitionsBuilder:(context, animation, secondaryAnimation, child) {
        var begin = Offset(0.0, -1.0);
        var end = Offset(0.0, 0.0);
        var tween = Tween(begin: begin, end: end);
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      }
  );
}

运行效果为：

3. 经过 CurveTween 来点加速度

当咱们将动画时长设置为 3s 以后，咱们能够明显的看到咱们的动画速度彷佛是匀速的。

那么若是我想修改下动画的速度，好比进来快，结束慢，可不能够呢？

答案是确定的。

咱们经过 CurveTween 能够来实现这个需求。

使用的重点在于 curve 的选择，因此咱们要选择哪一种 curve 呢？

其实 Flutter 我比较喜欢的一个点就是代码注释详细，而且还有 demo 演示。

咱们进入 Curves 源码，以 Curves.ease 为例：

/// A cubic animation curve that speeds up quickly and ends slowly.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.mp4}
  static const Cubic ease = Cubic(0.25, 0.1, 0.25, 1.0);

注释说了启动快，结束慢，并且还有一个 mp4 连接，点击能够看到以下效果：

咱们能够看出它的变化趋势，经过斜率能够看出前期快，后期慢，并且右边还有四种动画的效果预览。

咱们设置 CurveTween 代码以下：

var curveTween = CurveTween(curve: Curves.ease);

能够看到很简单，选择一种你想要的变化趋势便可。

4. 组合 Tween 和 CurveTween

这个也比较简单，经过 Tween 自带的 chain 方法便可，以下：

var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: Curves.ease));

另一般 Offset(0.0, 0.0) 能够直接写为 Offset.zero。

修改后代码为：

Route _createRoute() {
  return PageRouteBuilder(
      transitionDuration: Duration(seconds: 3),
      pageBuilder: (context, animation, secondaryAnimation) => Page2(),
      transitionsBuilder:(context, animation, secondaryAnimation, child) {
        var begin = Offset(0.0, 1.0);
        var end = Offset.zero;
        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: Curves.ease));

        return SlideTransition(
          position: animation.drive(tween),
          child: child,
        );
      }
  );
}

运行效果以下：

5. 完整例子

有了上面的基础，咱们就能够将四个方向的动画效果都加上，固然咱们这边就不延时了。另外为了演示方便，就直接打开后 delay 1s 返回。

代码以下：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return _getCenterWidget(Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _getBtn(context, 'right in',
            Tween(begin: Offset(1.0, 0.0), end: Offset.zero)),
        _getBtn(context, 'left in',
            Tween(begin: Offset(-1.0, 0.0), end: Offset.zero)),
        _getBtn(context, 'bottom in',
            Tween(begin: Offset(0.0, 1.0), end: Offset.zero)),
        _getBtn(context, 'top in',
            Tween(begin: Offset(0.0, -1.0), end: Offset.zero)),
      ],
    ));
  }
}

Widget _getBtn(BuildContext context, String textContent, Tween<Offset> tween) {
  return RaisedButton(
      child: Text(textContent),
      onPressed: () {
        Navigator.of(context).push(_createRoute(tween));
      });
}

Route _createRoute(Tween<Offset> tween) {
  return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => Page2(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return SlideTransition(
          position:
              animation.drive(tween.chain(CurveTween(curve: Curves.ease))),
          child: child,
        );
      });
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Future.delayed(Duration(seconds: 1), () {
      Navigator.of(context).pop();
    });
    return _getCenterWidget(Text('Page2'));
  }
}

Widget _getCenterWidget(Widget child) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: child,
    ),
  );
}

效果以下：

结语

到了这里，基本就把 Flutter 界面之间的过渡说清楚了。

其余的好比旋转、缩放、透明度甚至组合动画，相信有了上面的基础，你也能够自行进行 DIY。

这里附上缩放的效果以下：

具体代码见 GitHub：
flutter_page_transition

参考连接：
Animate a page route transition
Tween class

更多阅读：
Flutter 即学即用系列博客
Flutter & Dart

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程