本文微信公眾號「AndroidTraveler」首發。
背景
我們知道頁面之間如果直接切換，會比較生硬，還會讓使用者覺得很突兀，使用者體驗不是很好。
因此一般情況下，頁面之間的切換為了達到平滑過渡，都會新增動畫。
另外，有時候我們不喜歡系統的預設動畫，希望能夠自定義動畫。
基於此，本篇主要講述如何給 Flutter 的頁面切換增加自定義動畫。
預設效果
首先我們看看預設效果是怎樣的？
看起來似乎還不錯。程式碼如下：
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。
第一個頁面 MyApp 有一個按鈕，第二個頁面 Page2 有一個文字。
關鍵的切換就在 _createRoute() 這個路由建立方法裡面。
我們點進去 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
