一、
点击图标后,这个图标就完成了两个界面之间的过渡。
这个图标有从大图逐渐变成小图的位置,这就是Hero标准动画的实现
代码:
import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
void main() => runApp(MaterialApp(home: HeroAnimation()));
class PhotoHero extends StatelessWidget{
final String photo;
final VoidCallback onTap;
final double width;
const PhotoHero({Key key, this.photo, this.onTap, this.width}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: width,
child: Hero(
tag: photo,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
child: Image.network(photo,fit: BoxFit.contain,),
),
)
),
);
}
}
class HeroAnimation extends StatelessWidget{
@override
Widget build(BuildContext context) {
timeDilation=10.0;
return Scaffold(
appBar: AppBar(
title: const Text('Basic Hero Animation'),
),
body:Center(
child: PhotoHero(
photo: 'https://raw.githubusercontent.com/flutter/website/master/examples/_animation/hero_animation/images/flippers-alpha.png',
width: 300.0,
onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return Scaffold(
appBar: AppBar(
title: const Text('Basic Hero Animation'),
),
body: Container(
color: Colors.lightBlueAccent,
padding: EdgeInsets.all(16),
alignment: Alignment.topLeft,
child: PhotoHero(
photo: 'https://raw.githubusercontent.com/flutter/website/master/examples/_animation/hero_animation/images/flippers-alpha.png',
width: 100,
onTap: (){
Navigator.of(context).pop();//关闭当前界面
},
),
),
);
}));
},
),
) ,
);
}
}
二、
在点击图片的过程种,底部的图片逐渐放大,底部的圆形逐渐变成方形,完成两个页面之间的过渡。这种动画是比较炫酷的,这 是使用Hero实现的另一种动画。
在Flutter中可以用Hero widget创建这个动画。当hero通过动画从源页面飞到目标页面时,目标页面逐渐淡入视野。通常,hero是用户界面的一小部分,如图片,它通常在两个页面都有。从用户角度来看,hero在页面之间“飞翔”。