如何使用Hero動(dòng)畫？
什么是Hero動(dòng)畫？
[Flutter Hero動(dòng)畫開發(fā)實(shí)用教程] (https://cloud.tencent.com/developer/article/1551853)
在 Flutter中可以用 Hero widget創(chuàng)建這個(gè)動(dòng)畫。當(dāng) hero 通過動(dòng)畫從源頁面飛到目標(biāo)頁面時(shí)，目標(biāo)頁面逐漸淡入視野。通常， hero 是用戶界面的一小部分，如圖片，它通常在兩個(gè)頁面都有。從用戶的角度來看， hero 在頁面之間“飛翔”。接下來我們一起來學(xué)習(xí)如何創(chuàng)建Hero動(dòng)畫：
實(shí)現(xiàn)標(biāo)準(zhǔn)hero動(dòng)畫
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
class PhotoHero extends StatelessWidget {
const PhotoHero({Key? key, required this.photo, required this.onTap, required this.width }) : super(key: key);
final String photo;
final VoidCallback onTap; // 點(diǎn)擊回調(diào)
final double width;
Widget build(BuildContext context) {
return SizedBox(
width: width,
child: Hero(
tag: photo, // 動(dòng)畫關(guān)聯(lián)，關(guān)聯(lián)2個(gè)動(dòng)畫。
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
child: Image.network(photo, fit: BoxFit.contain),
),
),
),
);
}
}
class HeroAnimation extends StatelessWidget {
const HeroAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
timeDilation = 10.0; // 1.0 means normal animation speed.
String url = 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F1109%2F59f0e407j00rl2ziu00a2c001au00v8g.jpg&thumbnail=660x2147483647&quality=80&type=jpg';
return Scaffold(
appBar: AppBar(
title: const Text('Basic Hero Animation'),
),
body: Center(
child: PhotoHero(
photo: url,
width: 300.0,
onTap: () {
// 點(diǎn)擊頁面跳轉(zhuǎn)。
Navigator.of(context).push(MaterialPageRoute<void>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flippers Page'),
),
body: Container(
// Set background to blue to emphasize that it's a new route.
color: Colors.lightBlueAccent,
padding: const EdgeInsets.all(16.0),
alignment: Alignment.topLeft,
child: PhotoHero(
photo: url,
width: 100.0,
onTap: () {
// 跳出當(dāng)前頁面
Navigator.of(context).pop();
}, key: null,
),
),
);
}
));
}, key: null,
),
),
);
}
}
void main() {
runApp(const MaterialApp(home: HeroAnimation()));
}
Hero的函數(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í)；
- createRectTween：[可選]定義目標(biāo)Hero的邊界，在從起始位置到目的位置的“飛行”過程中該如何變化；
- child：[必須]定義動(dòng)畫所呈現(xiàn)的widget；
實(shí)現(xiàn)徑向hero動(dòng)畫
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
class Photo extends StatelessWidget {
const Photo({ Key? key, required this.photo, required this.color, required this.onTap }) : super(key: key);
final String photo;
final Color? color;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return Material(
// Slightly opaque color appears where the image has transparency.
color: Theme.of(context).primaryColor.withOpacity(0.25),
child: InkWell(
onTap: onTap,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints size) {
return Image.network( photo, fit: BoxFit.contain);
},
),
),
);
}
}
class RadialExpansion extends StatelessWidget {
const RadialExpansion({
Key? key,
required this.maxRadius,
required this.child,
}) : clipRectSize = 2.0 * (maxRadius / math.sqrt2),
super(key: key);
final double maxRadius;
final double clipRectSize;
final Widget child;
@override
Widget build(BuildContext context) {
return ClipOval(
child: Center(
child: SizedBox(
width: clipRectSize,
height: clipRectSize,
child: ClipRect(
child: child,
),
),
),
);
}
}
class RadialExpansionDemo extends StatelessWidget {
static const double kMinRadius = 32.0;
static const double kMaxRadius = 128.0;
static const opacityCurve = Interval(0.0, 0.75, curve: Curves.fastOutSlowIn);
const RadialExpansionDemo({Key? key}) : super(key: key);
static RectTween _createRectTween(Rect? begin, Rect? end) {
// 方形到原型變化的輔助類。
return MaterialRectCenterArcTween(begin: begin, end: end);
}
static Widget _buildPage(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: () {
// 子頁面圖片點(diǎn)擊，關(guān)閉頁面。動(dòng)畫回前頁面。
Navigator.of(context).pop();
}, color: null,
),
),
),
),
Text(
description,
style: const TextStyle(fontWeight: FontWeight.bold),
textScaleFactor: 3.0,
),
const SizedBox(height: 16.0),
],
),
),
),
);
}
// 構(gòu)建主頁面的3個(gè)item
Widget _buildHero(BuildContext context, String imageName, String description) {
return SizedBox(
width: kMinRadius * 2.0,
height: kMinRadius * 2.0,
child: Hero(
createRectTween: _createRectTween, // 動(dòng)畫轉(zhuǎn)換的形狀效果。
tag: imageName,
child: RadialExpansion(
maxRadius: kMaxRadius,
child: Photo(
photo: imageName,
onTap: () {
// 點(diǎn)擊底部item，進(jìn)入圖片詳情頁面，PageRouteBuilder帶淡入淡出效果。
Navigator.of(context).push(
PageRouteBuilder<void>(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return AnimatedBuilder(
animation: animation,
builder:(BuildContext context, Widget? child) {
return Opacity(
// 改變透明度
opacity: opacityCurve.transform(animation.value),
child: _buildPage(context, imageName, description),
);
}
);
},
),
);
}, color: null,
),
),
),
);
}
@override
Widget build(BuildContext context) {
timeDilation = 5.0; // 1.0 is normal animation speed.
return Scaffold(
appBar: AppBar(
title: const Text('Radial Transition Demo'),
),
body: Container(
padding: const EdgeInsets.all(32.0),
alignment: FractionalOffset.bottomLeft, // 底部放3個(gè)圖片。
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_buildHero(context, 'https://raw.githubusercontent.com/flutter/website/master/examples/_animation/radial_hero_animation/images/chair-alpha.png', 'Chair'),
_buildHero(context, 'https://raw.githubusercontent.com/flutter/website/master/examples/_animation/radial_hero_animation/images/binoculars-alpha.png', 'Binoculars'),
_buildHero(context, 'https://raw.githubusercontent.com/flutter/website/master/examples/_animation/radial_hero_animation/images/beachball-alpha.png', 'Beach ball'),
],
),
),
);
}
}
void main() {
runApp(const MaterialApp(home: RadialExpansionDemo()));
}
Animation：是Flutter動(dòng)畫庫中的一個(gè)核心類，它生成指導(dǎo)動(dòng)畫的值；
CurvedAnimation：Animation的一個(gè)子類，將過程抽象為一個(gè)非線性曲線；
AnimationController：Animation的一個(gè)子類，用來管理Animation；
-
Tween：在正在執(zhí)行動(dòng)畫的對(duì)象所使用的數(shù)據(jù)范圍之間生成值。例如，Tween可生成從紅到藍(lán)之間的色值，或者從0到255；
Animation還可以生成除double之外的其他類型值，如：Animation<Color> 或 Animation<Size>；
Animation對(duì)象有狀態(tài)。可以通過訪問其value屬性獲取動(dòng)畫的當(dāng)前值；
Animation對(duì)象本身和UI渲染沒有任何關(guān)系；forward()：啟動(dòng)動(dòng)畫；
reverse({double from})：倒放動(dòng)畫；
reset()：重置動(dòng)畫，將其設(shè)置到動(dòng)畫的開始位置；
stop({ bool canceled = true })：停止動(dòng)畫；addListener：動(dòng)畫的值發(fā)生變化時(shí)被調(diào)用；
addStatusListener：動(dòng)畫狀態(tài)發(fā)生變化時(shí)被調(diào)用；顯示logo
定義Animation對(duì)象
渲染過渡效果
