Flutter AnimationController / Tween 在多个 AnimatedBuilder 中重用
Flutter AnimationController / Tween Reuse In Multiple AnimatedBuilder
我正在构建一个包含多张卡片的屏幕,点击其中一张卡片后,卡片应该会翻转。使用带 Tweens 和 AnimatedBuilder 的 AnimatedController 为卡片设置动画没有问题。我的问题是什么是在我的所有 'Card' 小部件中 reuse/apply 相同的 AnimatedController 的最佳方法,而不必创建多个 AnimatedControllers 和 Tweens 并将其设置到每张卡片,但仍然允许我单独为它们设置动画。
最后这就是我所做的。我创建了一个 Stateful Widget 作为 Card 小部件,并在 Card 小部件内声明了 AnimatedController。然后,我在 Card 小部件中创建一个方法,以使用其 AnimatedController 控制动画。在父控件中,我将调用相应的 Card 控件方法来控制每个 Card 的动画。
在 Card 小部件中公开 showCard 方法:
class Card extends StatefulWidget {
final _CardState _CardState = _CardState();
@override
State<StatefulWidget> createState() => _CardState;
void showCard()=>_CardState.showCard();
}
卡片小部件中的动画方法:
AnimationController _acCardFlip;
Animation<double> _frontFlip;
Animation<double> _backFlip;
@override
void initState() {
super.initState();
_acCardFlip = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 250),
);
_frontFlip = Tween(
begin: 1.0,
end: 0.0,
).animate(CurvedAnimation(
parent: _acCardFlip,
curve: Interval(0.0, 0.5, curve: Curves.easeIn),
));
_backFlip = CurvedAnimation(
parent: _acCardFlip,
curve: Interval(0.5, 1.0, curve: Curves.easeOut),
);
}
showCard() {
setState(() {
if (_acCardFlip.isCompleted || _acCardFlip.velocity > 0)
_acCardFlip.reverse();
else
_acCardFlip.forward();
});
}
在父部件中,只需创建 Card 部件并调用动画方法:
Card card = Card();
card.showCard();
那么只需在列表中创建卡片即可独立控制多张卡片。
我正在构建一个包含多张卡片的屏幕,点击其中一张卡片后,卡片应该会翻转。使用带 Tweens 和 AnimatedBuilder 的 AnimatedController 为卡片设置动画没有问题。我的问题是什么是在我的所有 'Card' 小部件中 reuse/apply 相同的 AnimatedController 的最佳方法,而不必创建多个 AnimatedControllers 和 Tweens 并将其设置到每张卡片,但仍然允许我单独为它们设置动画。
最后这就是我所做的。我创建了一个 Stateful Widget 作为 Card 小部件,并在 Card 小部件内声明了 AnimatedController。然后,我在 Card 小部件中创建一个方法,以使用其 AnimatedController 控制动画。在父控件中,我将调用相应的 Card 控件方法来控制每个 Card 的动画。
在 Card 小部件中公开 showCard 方法:
class Card extends StatefulWidget {
final _CardState _CardState = _CardState();
@override
State<StatefulWidget> createState() => _CardState;
void showCard()=>_CardState.showCard();
}
卡片小部件中的动画方法:
AnimationController _acCardFlip;
Animation<double> _frontFlip;
Animation<double> _backFlip;
@override
void initState() {
super.initState();
_acCardFlip = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 250),
);
_frontFlip = Tween(
begin: 1.0,
end: 0.0,
).animate(CurvedAnimation(
parent: _acCardFlip,
curve: Interval(0.0, 0.5, curve: Curves.easeIn),
));
_backFlip = CurvedAnimation(
parent: _acCardFlip,
curve: Interval(0.5, 1.0, curve: Curves.easeOut),
);
}
showCard() {
setState(() {
if (_acCardFlip.isCompleted || _acCardFlip.velocity > 0)
_acCardFlip.reverse();
else
_acCardFlip.forward();
});
}
在父部件中,只需创建 Card 部件并调用动画方法:
Card card = Card();
card.showCard();
那么只需在列表中创建卡片即可独立控制多张卡片。