flutter动画— —Hero 动画

Hero 动画

Hero 动画的使用

微信朋友圈点击小图片的时候会有一个动画效果到大图预览，这个动画效果就可以使用Hero 动画实

现。

Hero 指的是可以在路由(页面)之间“飞行”的 widget，简单来说 Hero 动画就是在路由切换时，有一个共

享的widget 可以在新旧路由间切换。

 页面跳转

        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 HeroPage extends StatefulWidget {
  final Map arguments;
  const HeroPage({super.key, required this.arguments});
  @override
  State<HeroPage> createState() => _HeroPageState();
}

class _HeroPageState extends State<HeroPage> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
     
      body:
      GestureDetector(
onTap: () {
Get.off(
  MyPayTest(),
  transition: Transition.noTransition,
);
},
child: Hero(
              tag: widget.arguments["imageUrl"],
              child:
              Scaffold(
                backgroundColor: Colors.black,
              body:Center(
                child: AspectRatio(
                aspectRatio: 9/16,
                child:
                Image.network(widget.arguments["imageUrl"])
                ),
              )))
      ),
    );
  }
}

配置 Hero 动画的执行时间