如何給Flutter界面切換實(shí)現(xiàn)點(diǎn)特效
背景
我們知道頁(yè)面之間如果直接切換，會(huì)比較生硬，還會(huì)讓用戶(hù)覺(jué)得很突兀，用戶(hù)體驗(yàn)不是很好。
因此一般情況下，頁(yè)面之間的切換為了達(dá)到平滑過(guò)渡，都會(huì)添加動(dòng)畫(huà)。
另外，有時(shí)候我們不喜歡系統(tǒng)的默認(rèn)動(dòng)畫(huà)，希望能夠自定義動(dòng)畫(huà)。
基于此，本篇主要講述如何給 Flutter 的頁(yè)面切換增加自定義動(dòng)畫(huà)。
默認(rèn)效果
首先我們看看默認(rèn)效果是怎樣的？
看起來(lái)似乎還不錯(cuò)。代碼如下：
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,
),
);
}
可以看到創(chuàng)建了兩個(gè)頁(yè)面 MyApp 和 Page2。
第一個(gè)頁(yè)面 MyApp 有一個(gè)按鈕，第二個(gè)頁(yè)面 Page2 有一個(gè)文本。
關(guān)鍵的切換就在 _createRoute() 這個(gè)路由創(chuàng)建方法里面。
我們點(diǎn)進(jìn)去 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);
}
加上一開(kāi)始的注釋?zhuān)梢灾肋@個(gè)就是默認(rèn)的界面切換過(guò)渡效果。
/// See also: /// /// * [PageTransitionsTheme], which defines the default page transitions used /// by [MaterialPageRoute.buildTransitions].
另外這里可以看到默認(rèn)的動(dòng)畫(huà)時(shí)長(zhǎng)為 300ms，而且我們不能自定義。
@override Duration get transitionDuration => const Duration(milliseconds: 300);
接下來(lái)我們就說(shuō)說(shuō)如何自定義我們的界面切換過(guò)渡效果，并且自定義動(dòng)畫(huà)時(shí)長(zhǎng)。
自定義動(dòng)畫(huà)
1. 設(shè)置 PageRouteBuilder
由上面的分析我們知道最關(guān)鍵的地方在創(chuàng)建路由方法 _createRoute() 中。
因此我們首先修改一下，不使用默認(rèn)的 MaterialPageRoute，我們使用 PageRouteBuilder。
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => Page2(),
transitionsBuilder:(context, animation, secondaryAnimation, child) {
return child;
}
);
}
可以看到我們通過(guò) pageBuilder 指定路由頁(yè)面，通過(guò) transitionsBuilder 指定頁(yè)面過(guò)渡效果。
另外說(shuō)明一下，這里的參數(shù)大家不用死記硬背，我們點(diǎn)進(jìn)去源碼一看就知道了，如下：
/// 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);
如果我們運(yùn)行代碼，由于直接返回 child，所以應(yīng)該是沒(méi)有動(dòng)畫(huà)效果的。我們運(yùn)行之后，效果如下：
2. 添加 Tween 和 SlideTransition
默認(rèn)的過(guò)渡效果是從右邊往左過(guò)來(lái)，我們這里自定義的演示效果就從下面往上過(guò)渡好了。
需要了解一下的是 Tween 是一個(gè)介于開(kāi)始和結(jié)束值的線性插值器。
另外我們跟進(jìn)上面的 transitionsBuilder 可以知道他的第一個(gè) animation 參數(shù)取值為 0.0 到 1.0。
我們這邊是從下往上，所以 y 軸的偏移就是由 1.0 到 0.0，表示豎直方向距離頂部一整個(gè)頁(yè)面到不存在偏移（已經(jīng)在頂部）。
因此關(guān)于 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);
因?yàn)槲覀兪且獙?shí)現(xiàn)滑動(dòng)，因此將這個(gè)確定好的偏移動(dòng)畫(huà)通過(guò) 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,
);
}
);
}
效果如下：
看到上面效果，可能有小伙伴會(huì)有疑問(wèn)。
問(wèn)題一：你打開(kāi)頁(yè)面是從下到上我可以理解，但是返回為什么是反過(guò)來(lái)的從上到下呢？
我們跟進(jìn)去 transitionsBuilder 的源碼，可以看到
/// Used to build the route's transitions. /// /// See [ModalRoute.buildTransitions] for complete definition of the parameters. final RouteTransitionsBuilder transitionsBuilder;
我們跟進(jìn)去（通過(guò)點(diǎn)擊）注釋里面的 buildTransitions，可以看到 animation 的說(shuō)明如下：
/// * [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.
可以看到入棧和出棧的動(dòng)畫(huà)效果是相反的，而這個(gè)也符合我們的認(rèn)知。
問(wèn)題二：現(xiàn)在的效果是從下到上，如果我要實(shí)現(xiàn)從上到下，是不是將 begin 和 end 的 Offset 交換一下就可以？
其實(shí)如果你理解我上面說(shuō)的這句話(huà)
我們這邊是從下往上，所以 y 軸的偏移就是由 1.0 到 0.0，表示豎直方向距離頂部一整個(gè)頁(yè)面到不存在偏移（已經(jīng)在頂部）。
你就會(huì)知道，改成從 0.0 到 1.0 會(huì)是什么情況。
我們改一下，通過(guò)實(shí)際演示效果來(lái)說(shuō)明。
修改后的代碼如下：
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 做了交換。
運(yùn)行效果如下：
雖然能夠看出一點(diǎn)端倪，但是我們前面講過(guò)，默認(rèn)動(dòng)畫(huà)時(shí)長(zhǎng)是 300 ms，所以比較快，這樣不好分析。
我們可以通過(guò) PageRouteBuilder 的 transitionDuration 屬性來(lái)設(shè)置動(dòng)畫(huà)的時(shí)長(zhǎng)。
我們?cè)O(shè)置 3s 來(lái)看下效果，代碼如下：
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,
);
}
);
}
運(yùn)行效果如下：
看到了吧，確實(shí)是反過(guò)來(lái)了，從一開(kāi)始距離頂部為 0.0，到距離頂部 1.0（100%）。
那么如果我想實(shí)現(xiàn)從上到下進(jìn)入怎么辦呢？
我們給一張圖，相信看完你就懂了。
從這張圖我們知道，如果我們從下往上，y 應(yīng)該從 1.0 變到 0.0。如果要從上往下，y 應(yīng)該從 -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,
);
}
);
}
運(yùn)行效果為：
3. 通過(guò) CurveTween 來(lái)點(diǎn)加速度
當(dāng)我們將動(dòng)畫(huà)時(shí)長(zhǎng)設(shè)置為 3s 之后，我們可以明顯的看到我們的動(dòng)畫(huà)速度似乎是勻速的。
那么如果我想修改下動(dòng)畫(huà)的速度，比如進(jìn)來(lái)快，結(jié)束慢，可不可以呢？
答案是肯定的。
我們通過(guò) CurveTween 可以來(lái)實(shí)現(xiàn)這個(gè)需求。
使用的重點(diǎn)在于 curve 的選擇，所以我們要選擇哪種 curve 呢？
其實(shí) Flutter 我比較喜歡的一個(gè)點(diǎn)就是代碼注釋詳細(xì)，并且還有 demo 演示。
我們進(jìn)入 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);
注釋說(shuō)了啟動(dòng)快，結(jié)束慢，而且還有一個(gè) mp4 鏈接，點(diǎn)擊可以看到如下效果：
我們可以看出它的變化趨勢(shì)，通過(guò)斜率可以看出前期快，后期慢，而且右邊還有四種動(dòng)畫(huà)的效果預(yù)覽。
我們?cè)O(shè)置 CurveTween 代碼如下：
var curveTween = CurveTween(curve: Curves.ease);
可以看到很簡(jiǎn)單，選擇一種你想要的變化趨勢(shì)即可。
4. 組合 Tween 和 CurveTween
這個(gè)也比較簡(jiǎn)單，通過(guò) Tween 自帶的 chain 方法即可，如下：
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: Curves.ease));
另外一般 Offset(0.0, 0.0) 可以直接寫(xiě)為 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,
);
}
);
}
運(yùn)行效果如下：
5. 完整例子
有了上面的基礎(chǔ)，我們就可以將四個(gè)方向的動(dòng)畫(huà)效果都加上，當(dāng)然我們這邊就不延時(shí)了。另外為了演示方便，就直接打開(kāi)后 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,
),
);
}
效果如下：
結(jié)語(yǔ)
到了這里，基本就把 Flutter 界面之間的過(guò)渡說(shuō)清楚了。
其他的比如旋轉(zhuǎn)、縮放、透明度甚至組合動(dòng)畫(huà)，相信有了上面的基礎(chǔ)，你也可以自行進(jìn)行 DIY。
這里附上縮放的效果如下：
具體代碼見(jiàn) GitHub：
參考鏈接：
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Android中使用imageviewswitcher 實(shí)現(xiàn)圖片切換輪播導(dǎo)航的方法
ImageSwitcher是Android中控制圖片展示效果的一個(gè)控件。本文給大家介紹Android中使用imageviewswitcher 實(shí)現(xiàn)圖片切換輪播導(dǎo)航的方法，需要的朋友參考下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了Android自定義進(jìn)度條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Android自定義View實(shí)現(xiàn)炫酷進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)炫酷進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Android應(yīng)用程序（APK）的編譯打包過(guò)程
本篇文章主要介紹了Android應(yīng)用程序（APK）的編譯打包過(guò)程，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
Android實(shí)現(xiàn)動(dòng)態(tài)定值范圍效果的控件
這篇文中給大家分享一個(gè)Android的控件，這個(gè)控件實(shí)現(xiàn)是一個(gè)可以動(dòng)態(tài)選擇定值范圍的效果，實(shí)現(xiàn)后的效果很不錯(cuò)，對(duì)大家日常開(kāi)發(fā)或許有所幫助，感興趣的朋友們可以一起來(lái)看看。2016-09-09
Android Activity的4種啟動(dòng)模式圖文介紹
這篇文章主要給大家介紹了關(guān)于Android Activity的4種啟動(dòng)模式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Android開(kāi)發(fā)筆記之:Handler Runnable與Thread的區(qū)別詳解
本篇文章是對(duì)在Android中Handler Runnable與Thread的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05
快速解決Android7.0下沉浸式狀態(tài)欄變灰的問(wèn)題
下面小編就為大家分享一篇快速解決Android7.0下沉浸式狀態(tài)欄變灰的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Android如何創(chuàng)建可拖動(dòng)的圖片控件
這篇文章主要為大家詳細(xì)介紹了Android如何創(chuàng)建可拖動(dòng)的圖片控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要為大家介紹了Flutter圖片與文件選擇器使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01