所以我正在努力解决烦人的问题。我想同时运行 2 个动画,并且在没有以下情况下它不起作用:
animationController.addListener(() {
setState(() {});
});
这使一切变得波涛汹涌,我想根除这种情况。
当我删除setState
两个动画控制器并运行此函数时:
void animateButton() {
if (_forward) {
animationController.reverse();
animationController2.reverse();
_forward = false;
} else {
animationController.forward();
animationController2.forward();
_forward = true;
}
}
它只运行第一个动画控制器,没有第二个。动画是彼此相对的简单补间,所以我正在考虑做一些会使用一个补间的事情,对于第二个属性我会做一些反函数,但我想不出任何解决方案,所以它实际上会工作。也许我错过了一些简单的东西。
这是我的完整代码:
class _DetailScreenState extends State<DetailScreenWidget>
with TickerProviderStateMixin {
final GlobalKey<SendWidgetState> _key = GlobalKey();
AnimationController animationController;
Animation<double> tween;
AnimationController animationController2;
Animation<double> tween2;
@override
void initState() {
super.initState();
// FocusScope.of(context).unfocus();
animationController = AnimationController(
vsync: this, duration: Duration(milliseconds: 800));
tween = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeOut));
animationController.addListener(() {
setState(() {});
});
animationController2 = AnimationController(
vsync: this, duration: Duration(milliseconds: 800));
tween2 = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: animationController2, curve: Curves.easeOut));
animationController2.addListener(() {
setState(() {});
});
}
void showHideSendView() {
if (_forward) {
animationController.reverse();
animationController2.reverse();
_forward = false;
} else {
animationController.forward();
animationController2.forward();
_key.currentState.initView();
_forward = true;
}
}
void showTransactions() {
setState(() {
showHideSendView();
});
}
Widget build(BuildContext context) {
return Stack(children: [
SafeArea(
child: Stack(children: [
TransactionWidget(
opacity: tween2,
getTransactions: _getTransactions,
),
SizeTransition(
sizeFactor: tween,
axis: Axis.vertical,
axisAlignment: -1,
child: SendWidget(
key:_key,
func: shrinkSendView,
height: tween,
),
),
BalanceCard(
getBalanceFuture: _getBalanceFuture,
onPressSend: showTransactions),
]),
),
]);
}
}
我staggered animation
在颤振中学习了,但是我需要2 个动画同时运行而没有setState
. 为此我在互联网上没有找到任何东西,所以我在这里提问。
好吧,我解决了它,我想statefulWidget
动画的每一步都需要更新,或者我想象的东西,现在是工作代码,没有口吃。
我使用了@Simon Pot 的建议,最重要的是我将小部件包装成 FadeTransition
这是代码:
class _DetailScreenState extends State<DetailScreenWidget>
with TickerProviderStateMixin {
final GlobalKey<SendWidgetState> _key = GlobalKey();
AnimationController animationController;
Animation<double> tween;
Animation<double> tween2;
Future _getBalanceFuture;
Future _getTransactions;
bool _forward = false;
@override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this, duration: Duration(milliseconds: 800));
tween2 = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeOut));
tween = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeOut));
_getBalanceFuture = getBalance();
_getTransactions = _getTranData();
}
void animateButton() {
if (_forward) {
animationController.reverse();
_forward = false;
} else {
animationController.forward();
_key.currentState.initView();
_forward = true;
}
}
void showTransactions() {
animateButton();
}
@override
void dispose() {
animationController.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Stack(children: [
SafeArea(
child: Stack(children: [
FadeTransition(
opacity: tween2,
child: TransactionWidget(
getTransactions: _getTransactions,
),
),
SizeTransition(
sizeFactor: tween,
axis: Axis.vertical,
axisAlignment: -1,
child: SendWidget(
key:_key,
func: shrinkSendView,
height: tween,
),
),
BalanceCard(
getBalanceFuture: _getBalanceFuture,
onPressSend: showTransactions),
]),
),
]);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句