Flutter AnimationController /在多个AnimatedBuilder中重用补间

问题描述 投票:5回答:1

我正在建立一个包含多张卡的屏幕,点击其中一张卡时,卡应该翻转。我可以使用带有Tweens和AnimatedBuilder的AnimatedController为卡设置动画。我的问题是,在无需创建多个AnimatedControllers和Tweens并将其设置到每张卡上的情况下,在所有“ Card”小部件中重用/应用同一AnimatedController的最佳方法是什么,但仍然允许我分别为其设置动画。

flutter flutter-animation
1个回答
0
投票

最后这就是我所做的。我创建了一个有状态的小部件作为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();

然后仅在列表中创建卡以独立控制多张卡。

© www.soinside.com 2019 - 2024. All rights reserved.