給 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,
    ),
  );
}

效果以下：