Hero 指的是可以在路由(頁面)之間“飛行”的 widget，簡單來說 Hero 動(dòng)畫就是在路由切換時(shí)，有一個(gè)共享的 widget 可以在新舊路由間切換笑旺。由于共享的 widget 在新舊路由頁面上的位置量承、外觀可能有所差異，所以在路由切換時(shí)會(huì)從舊路逐漸過渡到新路由中的指定位置鞋诗，這樣就會(huì)產(chǎn)生一個(gè) Hero 動(dòng)畫膀捷。
實(shí)現(xiàn)一個(gè)簡單的 Hero 動(dòng)畫
Container(
height: 100,
alignment: Alignment.center,
child: InkWell(
child: Hero(
tag: Tag,
child: ClipOval(
child: Image.asset(
"assets/datas/night.jpg",
width: 80,
height: 80,
fit: BoxFit.cover,
),
)),
onTap: () {
Navigator.of(context).push(
new MaterialPageRoute(builder: (BuildContext context) {
return new HeroAnimationPage1();
}));
},
),
),
- HeroAnimationPage1
class HeroAnimationPage1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hero1"),
),
body: Center(
child: Container(
margin: EdgeInsets.all(20),
child: Hero(
tag: Tag, //唯一標(biāo)記，前后兩個(gè)路由頁Hero的tag必須相同
child: ClipOval(
child: Image.asset(
"assets/datas/night.jpg",
width: 120,
height: 120,
fit: BoxFit.cover,
),
),
),
),
));
}
}
效果圖
可以看到削彬，實(shí)現(xiàn) Hero 動(dòng)畫只需要用 Hero 組件將要共享的 widget 包裝起來全庸，并提供一個(gè)相同的 tag 即可，中間的過渡幀都是 Flutter Framework 自動(dòng)完成的融痛。必須要注意壶笼， 前后路由頁的共享 Hero 的 tag 必須是相同的，F(xiàn)lutter Framework 內(nèi)部正是通過 tag 來確定新舊路由頁 widget 的對(duì)應(yīng)關(guān)系的雁刷。
但我們用的是 MaterialPageRoute 這個(gè)系統(tǒng)給我們提供好的路由覆劈，這個(gè)路由能讓我們?cè)?Android 或者 Ios 上呈現(xiàn)相應(yīng)的頁面跳轉(zhuǎn)效果，但在這里和 Hero 合起來看有點(diǎn)雜亂，別扭墩崩，我們稍微改一下：
Container(
height: 100,
alignment: Alignment.center,
child: InkWell(
child: Hero(
tag: Tag,
child: ClipOval(
child: Image.asset(
"assets/datas/night.jpg",
width: 80,
height: 80,
fit: BoxFit.cover,
),
)),
onTap: () {
// Navigator.of(context).push(
// new MaterialPageRoute(builder: (BuildContext context) {
// return new HeroAnimationPage1();
// }));
Navigator.push(context, PageRouteBuilder(pageBuilder:
(BuildContext context, Animation animation,
Animation secondaryAnimation) {
return new FadeTransition(
opacity: animation,
child: Scaffold(
appBar: AppBar(
title: Text("Fade"),
),
body: HeroAnimationRouteWithFade(),
),
);
}));
},
),
),
- HeroAnimationRouteWithFade
class HeroAnimationRouteWithFade extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: EdgeInsets.all(20),
child: Hero(
tag: "tag", //唯一標(biāo)記氓英，前后兩個(gè)路由頁Hero的tag必須相同
child: ClipOval(
child: Image.asset(
"assets/datas/night.jpg",
width: 120,
height: 120,
fit: BoxFit.cover,
),
),
),
),
);
}
}
效果圖
通過 PageRouteBuilder 自定義自己的路由器，動(dòng)畫看起來明顯干凈了很多鹦筹。
不過細(xì)心的我發(fā)現(xiàn)铝阐，在運(yùn)動(dòng)（飛翔）過程中，圖片在慢慢變大的同時(shí)好像也稍微有點(diǎn)變形铐拐。這其實(shí)我也不知道為啥徘键，后來我從 Flutter 中文官網(wǎng)看到 MaterialRectCenterArcTween 這個(gè)類。這個(gè)類居然能讓控件在運(yùn)動(dòng)過程中圓角不變形遍蟋。
我們先回頭看看 Hero 的構(gòu)造函數(shù)：
const Hero({
Key key,
@required this.tag,
this.createRectTween,
this.flightShuttleBuilder,
this.placeholderBuilder,
this.transitionOnUserGestures = false,
@required this.child,
}) : assert(tag != null),
assert(transitionOnUserGestures != null),
assert(child != null),
super(key: key);
tag：[必須]用于關(guān)聯(lián)兩個(gè) Hero 動(dòng)畫的標(biāo)識(shí),前后兩個(gè)路由頁 Hero 的 tag 必須相同.
createRectTween：[可選]定義目標(biāo) Hero 的邊界吹害，在從起始位置到目的位置的運(yùn)動(dòng)過程中該如何變化。
child：[必須]定義動(dòng)畫所呈現(xiàn)的 widget虚青。
MaterialRectCenterArcTween 這個(gè)類正好能給我們返回 createRectTween 參數(shù)所需的實(shí)例它呀。
我們?cè)賮砜匆粋€(gè)稍微高大上的 Hero 動(dòng)畫，其實(shí)我覺得沒啥改動(dòng)棒厘，只是界面做的稍微復(fù)雜一點(diǎn)纵穿，添加了 createRectTween。
實(shí)現(xiàn)一個(gè)復(fù)雜的 Hero 動(dòng)畫
- 這里提一下 timeDilation = 3; 這是讓過渡動(dòng)畫時(shí)間稍微慢一點(diǎn)奢人，默認(rèn)為 1.
timeDilation =3;//動(dòng)畫過渡時(shí)間
其實(shí)第二個(gè)案例就只是添加了 createRectTween谓媒，你可以試著注釋 createRectTween；或者案例 2 中直接注釋 Hero 控件何乎；看看它們的動(dòng)畫效果是啥句惯，想來你印象會(huì)更深。
有興趣的小伙伴關(guān)注公眾號(hào)支救，和我一起學(xué)習(xí)吧抢野，本文代碼在文末。
全部代碼
import 'package:flutter/material.dart';
import 'package:flutter_travel/widgets/item_widget.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
import 'dart:math' as math;
const Tag = "tag"; ////唯一標(biāo)記搂妻，前后兩個(gè)路由頁Hero的tag必須相同
class HeroPage extends StatefulWidget {
@override
_HeroPageState createState() => _HeroPageState();
}
class _HeroPageState extends State<HeroPage> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
timeDilation = 3; //動(dòng)畫過渡時(shí)間
return Scaffold(
appBar: AppBar(
title: Text("Hero"),
),
body: Container(
margin: EdgeInsets.only(top: 30, right: 5, left: 5),
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100,
alignment: Alignment.center,
child: InkWell(
child: Hero(
tag: Tag,
child: ClipOval(
child: Image.asset(
"assets/datas/night.jpg",
width: 80,
height: 80,
fit: BoxFit.cover,
),
)),
onTap: () {
// Navigator.of(context).push(
// new MaterialPageRoute(builder: (BuildContext context) {
// return new HeroAnimationPage1();
// }));
Navigator.push(context, PageRouteBuilder(pageBuilder:
(BuildContext context, Animation animation,
Animation secondaryAnimation) {
return new FadeTransition(
opacity: animation,
child: Scaffold(
appBar: AppBar(
title: Text("Fade"),
),
body: HeroAnimationRouteWithFade(),
),
);
}));
},
),
),
Container(
height: 40,
width: double.infinity,
alignment: Alignment.center,
margin: EdgeInsets.only(top: 30),
child: Text(
"下面的案例僅僅只是添加了RectTween",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
],
)),
Expanded(
flex: 2,
child: Container(
alignment: Alignment.bottomCenter,
margin: EdgeInsets.only(bottom: 100),
child: _buildHero(context, 'assets/datas/empty.png', '空空如也'),
))
],
),
),
);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
}
class HeroAnimationPage1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hero1"),
),
body: Center(
child: Container(
margin: EdgeInsets.all(20),
child: Hero(
tag: Tag, //唯一標(biāo)記蒙保，前后兩個(gè)路由頁Hero的tag必須相同
child: ClipOval(
child: Image.asset(
"assets/datas/night.jpg",
width: 120,
height: 120,
fit: BoxFit.cover,
),
),
),
),
));
}
}
class HeroAnimationRouteWithFade extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: EdgeInsets.all(20),
child: Hero(
tag: "tag", //唯一標(biāo)記，前后兩個(gè)路由頁Hero的tag必須相同
child: ClipOval(
child: Image.asset(
"assets/datas/night.jpg",
width: 120,
height: 120,
fit: BoxFit.cover,
),
),
),
),
);
}
}
///////////////////////////////////
//華麗的分割線
///////////////////////////////////
const double kMinRadius = 40.0;
const double kMaxRadius = 150.0;
class Photo extends StatelessWidget {
Photo({Key key, this.photo, this.color, this.onTap}) : super(key: key);
final String photo;
final Color color;
final VoidCallback onTap;
Widget build(BuildContext context) {
return Material(
color: Colors.grey.withOpacity(0.25),
child: InkWell(
onTap: onTap,
child: Image.asset(
photo,
color: Colors.green.withOpacity(.8),
fit: BoxFit.contain,
),
),
);
}
}
RectTween _createRectTween(Rect begin, Rect end) {
print("begin=${begin}\t end=${end}");
return MaterialRectCenterArcTween(begin: begin, end: end);
}
Widget _buildHero(BuildContext context, String imageName, String description) {
return Container(
width: kMinRadius * 2.0,
height: kMinRadius * 2.0,
child: Hero(
createRectTween: _createRectTween,
tag: imageName,
child: RadialExpansion(
maxRadius: kMaxRadius,
child: Photo(
photo: imageName,
onTap: () {
Navigator.of(context).push(
PageRouteBuilder<void>(
pageBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return FadeTransition(
opacity: animation,
child: _showDetailPage(context, imageName, description));
},
),
);
},
),
),
),
);
}
Widget _showDetailPage(
BuildContext context, String imageName, String description) {
return Container(
color: Theme.of(context).canvasColor,
child: Center(
child: Card(
elevation: 8.0,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: kMaxRadius * 2.0,
height: kMaxRadius * 2.0,
child: Hero(
createRectTween: _createRectTween,
tag: imageName,
child: RadialExpansion(
maxRadius: kMaxRadius,
child: Photo(
photo: imageName,
onTap: () {
Navigator.of(context).pop();
},
),
),
),
),
Text(
description,
style: TextStyle(
fontWeight: FontWeight.bold,
),
textScaleFactor: 3.0,
),
const SizedBox(height: 16.0),
],
),
),
),
);
}
class RadialExpansion extends StatelessWidget {
RadialExpansion({
Key key,
this.maxRadius,
this.child,
}) : clipRectSize = 2.0 * (maxRadius / math.sqrt2),
super(key: key);
final double maxRadius;
final clipRectSize;
final Widget child;
@override
Widget build(BuildContext context) {
return ClipOval(
child: Center(
child: SizedBox(
width: clipRectSize,
height: clipRectSize,
child: ClipRect(
child: child,
),
),
),
);
}
}
