Анимировать виджет обратно в исходное положение в конце жеста - PullRequest
Новая
       4

Анимировать виджет обратно в исходное положение в конце жеста

1 голос
/ 25 января 2020

Я довольно новичок во Флаттере и решил бросить вызов самому себе, чтобы внедрить подобные Tinder-карты с возможностью считывания. Я использовал детектор жестов и виджеты трансформации для управления перемещением и вращением карт, пока пользователь перетаскивает, что отлично работает. Однако у меня возникают проблемы с выяснением того, как правильно анимировать карту в исходное положение после того, как пользователь разрешит go. Я пытался использовать анимацию между смещением карт и 0, но анимация не работает. Вместо плавной анимации карта мгновенно возвращается назад. Надеюсь, вам хватит информации, ребята. Дайте мне знать, если я должен предоставить что-нибудь еще. Любая помощь, чтобы исправить это было бы здорово. Спасибо!

Вот код моего swiper: 

class _SwiperState extends State<Swiper> with TickerProviderStateMixin{
  List<Widget> cardList;

  var xOffset = 0.0;
  var yOffset = 0.0;
  var dragStartx = 0.0;
  var dragStarty = 0.0;
  var width;

  AnimationController xAnimationController;
  AnimationController yAnimationController;
  Animation<double> xAnimation;
  Animation<double> yAnimation;

  @override
  void initState() {
    xAnimationController = AnimationController(
        vsync: this,
        duration: Duration(seconds: 1));
    xAnimation = Tween<double>(begin: xOffset, end: 0).animate(xAnimationController);
    xAnimationController.addListener(() {
      setState(() {
        xOffset = xAnimation.value;
      });
    });

    yAnimationController = AnimationController(
        vsync: this,
        duration: Duration(seconds: 1));
    yAnimation = Tween<double>(begin: xOffset, end: 0).animate(yAnimationController);
    yAnimationController.addListener(() {
      setState(() {
        yOffset = yAnimation.value;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    xAnimationController.dispose();
    yAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;

    List<ProfileCard> cards = new List();
    cards.add(ProfileCard(Colors.blue, 'Samantha'));
    cards.add(ProfileCard(Colors.red, 'Amanda'));
    cards.add(ProfileCard(Colors.indigo, 'Maria'));

    return Container(
      color: Colors.yellow,
      child: GestureDetector(
        onHorizontalDragDown: (drag) {
          setState(() {
            dragStartx = drag.globalPosition.dx;
            dragStarty = drag.globalPosition.dy;
          });
        },
        onHorizontalDragUpdate: (drag) {
          setState(() {
            xOffset = drag.globalPosition.dx - dragStartx;
            yOffset = drag.globalPosition.dy - dragStarty;
          });
          print('xOffset: $xOffset');
          print('yOffset: $yOffset');
        },
        onHorizontalDragEnd: (drag) {
          xAnimationController.forward(from: 0.0);
          yAnimationController.forward(from: 0.0);
        },
        child: Transform.translate(
          offset: Offset(xOffset, yOffset),
          child: Transform.rotate(
            angle: xOffset / width / 2,
            child: Card(
              color: cards[0].color,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            ),
          ),
        ),
      ),
    );
  }
}
...