Flutter 学习之旅(三十六) Flutter 动画(三)

hero动画是指在页面之间穿梭的widget,类似微信朋友圈点击图片放大并展示出来的过程,

先来个例子

GestureDetector(
                    child: Hero(
                      tag: 'tsm_tag',
                      child: new Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Image.asset(
                          'images/bg_baby_handbook_en.png',
                          width: 100,
                        ),
                      ),
                    ),
                    onTap: (){
                      Navigator.push(context, PageRouteBuilder(
                          pageBuilder: (BuildContext context, Animation animation,
                              Animation secondaryAnimation) {
                            return FadeTransition(
                              opacity: animation,
                              child:  HeroForwardPage(),
                            );
                          })
                      );
                    },
                  )

class HeroForwardPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('原图'),
        centerTitle: true,
      ),
      body: Center(
        child: Hero(
          tag: 'tsm_tag',
          child: Image.asset(
            'images/bg_baby_handbook_en.png',
            fit: BoxFit.contain,
            width: double.infinity,
          ),
        ),
      ),
    );
  }
}

实现Hero动画只需要用Hero组件将要共享的widget包装起来，并提供一个相同的tag即可，中间的过渡帧都是Flutter Framework自动完成的。

效果图

GIF 2020-9-15 16-12-58.gif

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter