Flutter 动画详解系列——Hero动画
Hero动画：指的是可以在路由(页面)之间“飞行”的动画，简单来说 Hero 动画就是在路由切换时，有一个共享的 widget 可以在新旧路由间切换。
Hero 动画的使用
微信朋友圈点击小图片的时候会有一个动画效果到大图预览，这个动画效果就可以使用Hero 动画实现。
在Flutter中，Hero动画会在两个有相同tag的Hero Widget之间发生。如果你想要Hero动画在从页面A跳转到页面B时生效，但从页面A跳转到页面C时不生效，即使页面B和C都有相同标签的Hero，你需要控制特定情况下Hero控件的可用性。
页面跳转
GestureDetector(
onTap: () {
Get.toNamed("/hero", arguments: {
"imageUrl":
"https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0",
"description": "这是一张图片",
});
},
child: Container(
child: Hero(
tag:
'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
child: Image.network(
"https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0",
height: 100,
)),
))
动画页面
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Wrap(
// 方位
direction:Axis.horizontal,
// 对齐方式
alignment:WrapAlignment.start,
// x轴间距
spacing: 10.0,
// Y轴间距
runSpacing: 10.0,
children: [
MyButton(text: "《封神第一部》", pressed: () {}),
MyButton(text: "变形金刚", pressed: () {}),
MyButton(text: "暗杀风暴", pressed: () {}),
MyButton(text: "消失的她", pressed: () {}),
MyButton(text: "零号追杀", pressed: () {}),
MyButton(text: "长安三万里", pressed: () {}),
MyButton(text: "老板娘3", pressed: () {}),
MyButton(text: "穷兄富弟", pressed: () {}),
MyButton(text: "暗杀风暴", pressed: () {}),
MyButton(text: "黄河守墓人", pressed: () {}),
MyButton(text: "上海滩之风云正道", pressed: () {}),
MyButton(text: "惊天侠盗团", pressed: () {}),
],
);
}
}
// 自定义按钮
class MyButton extends StatelessWidget {
final String text;
final Function() pressed;
const MyButton({super.key, required this.text, required this.pressed});
@override
Widget build(BuildContext context) {
return ElevatedButton(
style: ButtonStyle(
elevation: MaterialStateProperty.all(0),
backgroundColor: MaterialStateProperty.all(Colors.blue),
foregroundColor: MaterialStateProperty.all(Colors.white),
),
onPressed: pressed,
child: Text(text));
}
}
