利用Flutter實(shí)現(xiàn)“孔雀開屏”的動(dòng)畫效果
前言
今天分享一個(gè)類似“孔雀開屏”的動(dòng)畫效果，打開新的頁面時(shí)，新的頁面從屏幕右上角以圓形逐漸打開到全屏。
先來看下具體的效果
不知道這種效果大家叫什么名字？如果有更合適的名字可以在評論處告訴我，下面來說下如何實(shí)現(xiàn)此效果。
在使用Navigator進(jìn)入一個(gè)新的頁面時(shí)，通常用法如下：
Navigator.of(context).push(MaterialPageRoute(
builder: (context){
return PageB();
}
));
MaterialPageRoute就包含了切換頁面時(shí)的動(dòng)畫效果，在iOS上效果是左右滑動(dòng)切換，在Android上效果是上下滑動(dòng)，如果想要自定義切換效果如何實(shí)現(xiàn)呢？答案是使用PageRouteBuilder，用法如下：
Navigator.of(context).push(PageRouteBuilder(pageBuilder:
(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
...
}));
在pageBuilder函數(shù)中使用animation返回新頁面的動(dòng)畫效果即可。
新的頁面以圓形效果逐漸打開，注意并沒有縮放效果，所以新的頁面是被裁減的，新的頁面以右上角為圓心，半徑逐漸變大進(jìn)行裁切，就是我們想要的效果。
通過上面的分析，使用ClipPath對新的頁面進(jìn)行裁切
Navigator.of(context).push(PageRouteBuilder(pageBuilder:
(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return AnimatedBuilder(
animation: animation,
builder: (context, child) {
return ClipPath(
clipper: CirclePath(animation.value),
child: child,
);
},
child: PageB(),
);
}));
重點(diǎn)是CirclePath，這就是裁切的路徑，
class CirclePath extends CustomClipper<Path> {
CirclePath(this.value);
final double value;
@override
Path getClip(Size size) {
var path = Path();
double radius =
value * sqrt(size.height * size.height + size.width * size.width);
path.addOval(Rect.fromLTRB(
size.width - radius, -radius, size.width + radius, radius));
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}
由于Path沒有直接添加圓形的API函數(shù)，因此使用橢圓方法，只需將橢圓的矩形區(qū)域設(shè)置為正方形，那么裁切出來的就是圓形。
半徑的最大值并不是屏幕的寬或者高，而是屏幕的對角線長度。
由于是從右上角開始，而且裁切的矩形區(qū)域必須是正方形，所以裁切的矩形區(qū)域是超出頁面區(qū)域的。
如果很多頁面都用到了這個(gè)效果，可以進(jìn)行封裝，類似于MaterialPageRoute，封裝如下：
class CirclePageRoute extends PageRoute {
CirclePageRoute({
@required this.builder,
this.transitionDuration = const Duration(milliseconds: 500),
this.opaque = true,
this.barrierDismissible = false,
this.barrierColor,
this.barrierLabel,
this.maintainState = true,
});
final WidgetBuilder builder;
@override
final Duration transitionDuration;
@override
final bool opaque;
@override
final bool barrierDismissible;
@override
final Color barrierColor;
@override
final String barrierLabel;
@override
final bool maintainState;
@override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return AnimatedBuilder(
animation: animation,
builder: (context, child) {
return ClipPath(
clipper: CirclePath(animation.value),
child: child,
);
},
child: builder(context),
);
}
}
使用
Navigator.of(context).push(CirclePageRoute(builder: (context) {
return PageB();
}));
如果你查看CupertinoPageRoute、MaterialPageRoute、PageRouteBuilder的源碼，你會發(fā)現(xiàn)這3個(gè)都是繼承自PageRoute，所以，不知不覺我們又學(xué)會了自定義路由。
總結(jié)
到此這篇關(guān)于利用Flutter實(shí)現(xiàn)“孔雀開屏”的動(dòng)畫效果的文章就介紹到這了,更多相關(guān)Flutter動(dòng)畫效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- flutter實(shí)現(xiàn)帶刪除動(dòng)畫的listview功能
- Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動(dòng)畫效果
- 如何使用Flutter實(shí)現(xiàn)58同城中的加載動(dòng)畫詳解
- flutter RotationTransition實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫
- flutter PositionedTransition實(shí)現(xiàn)縮放動(dòng)畫
- flutter FadeTransition實(shí)現(xiàn)透明度漸變動(dòng)畫
- Flutter路由的跳轉(zhuǎn)、動(dòng)畫和傳參詳解（最簡單）
- Flutter 用自定義轉(zhuǎn)場動(dòng)畫實(shí)現(xiàn)頁面切換
相關(guān)文章
Android利用SpannableString實(shí)現(xiàn)格式化微博內(nèi)容
這篇文章主要介紹了Android利用SpannableString實(shí)現(xiàn)格式化微博內(nèi)容的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考借鑒價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
Android編程之canvas繪制各種圖形(點(diǎn),直線,弧,圓,橢圓,文字,矩形,多邊形,曲線,圓角矩形)
這篇文章主要介紹了Android編程之canvas繪制各種圖形的方法,涉及Android使用Canvas類中常用繪圖方法的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
Android中自定義Window Title樣式實(shí)例
這篇文章主要介紹了Android中自定義Window Title樣式實(shí)例,本文給出效果預(yù)覽和實(shí)現(xiàn)方法,需要的朋友可以參考下2015-01-01
Android如何讓W(xué)ebView中的HTML5頁面實(shí)現(xiàn)視頻全屏播放
最近在工作遇到一個(gè)需求，需要讓W(xué)ebView中的HTML5頁面實(shí)現(xiàn)視頻全屏播放的效果，通過查找相關(guān)的資料終于找到了解決的方法，所以想著分享給大家，所以本文介紹了關(guān)于Android如何讓W(xué)ebView中的HTML5頁面實(shí)現(xiàn)視頻全屏播放的相關(guān)資料，需要的朋友可以參考學(xué)習(xí)。2017-04-04
android SQLite數(shù)據(jù)庫總結(jié)
本文主要介紹了android SQLite數(shù)據(jù)庫的相關(guān)知識。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
詳解Android應(yīng)用開發(fā)--MP3音樂播放器代碼實(shí)現(xiàn)（一）
這篇文章主要介紹了詳解Android應(yīng)用開發(fā)--MP3音樂播放器代碼實(shí)現(xiàn)（一），非常具有實(shí)用價(jià)值，需要的朋友可以參考下 。2017-01-01
Android apk 項(xiàng)目一鍵打包并上傳到蒲公英的實(shí)現(xiàn)方法
這篇文章主要介紹了Android apk 項(xiàng)目一鍵打包并上傳到蒲公英,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
Android編程解析Json格式數(shù)據(jù)的方法
這篇文章主要介紹了Android編程解析Json格式數(shù)據(jù)的方法,涉及Android中json格式數(shù)據(jù)的構(gòu)造、讀取及遍歷等技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
這篇文章主要詳細(xì)介紹了Android Studio無法打開問題解決辦法，文中有詳細(xì)的解決步驟和圖文介紹，對我們解決這個(gè)問題有一定的幫助,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Android編程之json解析,結(jié)合實(shí)例形式較為詳細(xì)的分析了了Android針對json格式數(shù)據(jù)的創(chuàng)建、讀取與解析技巧,需要的朋友可以參考下2015-12-12