所以基本上我一直在尝试实现动画。还使用 flutter_animate 4.2.0+1 包。 首先让我向您展示代码:
Animate(
effects: [
SlideEffect(
end: Offset(0, 1),
delay: Duration(milliseconds: 400),
duration: Duration(milliseconds: 800),
curve: Curves.ease,
),
],
child: authBox(),
)
这会带来 authbox 关闭动画。
登录按钮:
onTap: () {
Future.delayed(
Duration(milliseconds: 100),
() {
showGeneralDialog(
barrierDismissible: true,
barrierLabel: 'Login',
context: context,
transitionDuration:
Duration(milliseconds: 400),
transitionBuilder: (context, animation,
secondaryAnimation, child) {
Tween<Offset> tween;
tween = Tween(
begin: Offset(0, -1),
end: Offset.zero,
);
return SlideTransition(
position: tween.animate(
CurvedAnimation(
parent: animation,
curve: Curves.bounceIn),
),
child: child,
);
},
pageBuilder: (context, _, __) {
return Center(
child: Container(
height: size.height / 2.5,
width: size.width / 1.2,
color: Colors.white,
child: Center(
child: Text(
'Login',
style: TextStyle(
fontFamily: 'SFProDisplay',
fontStyle: FontStyle.normal,
),
),
),
),
);
},
);
},
);
},
这会从顶部显示登录对话框。
就像退出对话框和退出授权框一样。在
dismissed
上,对话返回并且授权框返回。
如果你想同时运行两个动画,你可以在代码中声明一个新的bool,例如:
bool isButtonPressed=false;
然后,在 onTap 处理程序中,在开头添加以下内容:
setState(() {
isButtonPressed = true;
});
在 showGeneralDialog 之后添加以下内容:
.then((value) {
setState(() {
isButtonPressed = false;
});
})
这是您的 Animate Widget 的代码,其中包含 authbox:
isButtonPressed
? Animate(
effects: [
SlideEffect(
end: Offset(0, 1),
delay: Duration(milliseconds: 400),
duration: Duration(milliseconds: 800),
curve: Curves.ease,
),
],
child: authbox(),
)
: authbox()
简单的解决方案,但它有效。 如果还有什么问题可以在评论里提问。