在Overlay/PopupRoute中制作英雄小部件动画的方法如下:
class HeroWidget extends StatefulWidget {
@override
_HeroWidgetState createState() => _HeroWidgetState();
}
class _HeroWidgetState extends State<HeroWidget>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (BuildContext context, Widget child) {
return Opacity(
opacity: _animation.value,
child: Transform.scale(
scale: _animation.value,
child: child,
),
);
},
child: Container(
// Hero小部件的内容
),
);
}
}
OverlayEntry overlayEntry = OverlayEntry(
builder: (BuildContext context) {
return HeroWidget();
},
);
Overlay.of(context).insert(overlayEntry);
overlayEntry.remove();
这样,当Overlay/PopupRoute显示时,HeroWidget将会以动画的形式渐变出现,当Overlay/PopupRoute关闭时,HeroWidget将会以动画的形式渐变消失。
这种动画效果可以应用于各种场景,例如弹出菜单、对话框、提示框等。腾讯云提供的相关产品和产品介绍链接地址可以参考腾讯云官方文档:https://cloud.tencent.com/document/product/876
领取专属 10元无门槛券
手把手带您无忧上云