Flutter AnimationController / Повторное использование анимации в нескольких AnimatedBuilder

Я создаю экран с несколькими картами, при нажатии на одну из карт карта должна переворачиваться. У меня нет проблем с анимацией карты с помощью AnimatedController с Tweens и AnimatedBuilder. Мой вопрос: как лучше всего повторно использовать / применить один и тот же AnimatedController во всех моих виджетах «Карточка» без необходимости создавать несколько AnimatedController и Tweens и устанавливать их для каждой карты, но при этом позволять мне анимировать их по отдельности.


flutter flutter-animation
person Zane    schedule 27.04.2019    source источник
comment
Вы нашли решение?   -  person Yacine Belarbi    schedule 02.06.2020
comment
@YacineBelarbi Я добавил свое решение ниже в качестве ответа   -  person Zane    schedule 22.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

В конце концов, это то, что я сделал. Я создал виджет с отслеживанием состояния в качестве виджета Card и объявил AnimatedController внутри виджета Card. Затем я создаю метод в виджете Card для управления анимацией с помощью AnimatedController. В родительском виджете я просто вызываю соответствующий метод виджета Card для управления анимацией каждой карты.

Отображение метода showCard в виджете Card:

class Card extends StatefulWidget {

  final _CardState _CardState = _CardState();
  @override
  State<StatefulWidget> createState() => _CardState;

  void showCard()=>_CardState.showCard();
}

Метод анимации в виджете Card:

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();

Затем просто создайте карту в списке, чтобы управлять несколькими картами независимо.

person Zane    schedule 16.06.2020