Flutter AnimationController / Tween 在多个 AnimatedBuilder 中重用答案

【问题标题】：Flutter AnimationController / Tween Reuse In Multiple AnimatedBuilderFlutter AnimationController / Tween 在多个 AnimatedBuilder 中重用
【发布时间】：2019-09-16 13:38:42
【问题描述】：

我正在构建一个包含多张卡片的屏幕，点击其中一张卡片时，卡片应该翻转。我可以使用带有 Tweens 和 AnimatedBuilder 的 AnimatedController 为卡片设置动画。我的问题是在我的所有“卡片”小部件中重用/应用相同 AnimatedController 的最佳方式是什么，而无需创建多个 AnimatedController 和 Tweens 并将其设置到每张卡片，但仍然允许我单独为它们设置动画。

【问题讨论】：

您找到解决方案了吗？
@YacineBelarbi 我在下面添加了我的解决方案作为答案

标签： flutter flutter-animation

【解决方案1】：

最后这就是我所做的。我创建了一个有状态的小部件作为卡片小部件，并在卡片小部件中声明了 AnimatedController。然后我在 Card 小部件中创建一个方法来使用其 AnimatedController 控制动画。在父窗口小部件中，我将只调用相应的卡片窗口小部件方法来控制每个卡片的动画。

在 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.showCard();

然后只需在列表中创建卡片即可独立控制多张卡片。

【讨论】：