flutter - 在颤动的卡片堆栈视图中将前面的卡片动画到后面

Question

我有一堆卡片和滚轮。我正在尝试为前面的卡片设置动画，将其向右移动，然后以某种方式将其带回卡片的背面。我使用了一个未来函数来指定应该首先完成的部分代码。但我得到的是；它首先改变卡片的索引，动画发生。这是我的代码：

class AnimationsPractice extends StatefulWidget {
  static const String id = 'test_screen';

  @override
  _AnimationsPracticeState createState() => _AnimationsPracticeState();
}

class _AnimationsPracticeState extends State<AnimationsPractice>
    with SingleTickerProviderStateMixin {
  FixedExtentScrollController _scrollController =
      FixedExtentScrollController(initialItem: 0);
  AnimationController _controller;
  Animation<Offset> _offsetAnimation;
  int selected;
  List<Widget> sampleCard;
  Animation<Offset> _offsetAnimation2;
  bool halfWayAnimation;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: const Duration(seconds: 1), vsync: this)
          ..repeat();
    _offsetAnimation = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(1.5, 0.0),
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.0,
          0.5,
          curve: Curves.elasticIn,
        ),
      ),
    );
    _offsetAnimation2 = Tween<Offset>(
      begin: const Offset(1.5, 0.0),
      end: Offset.zero,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.5,
          1.0,
          curve: Curves.elasticIn,
        ),
      ),
    );
    halfWayAnimation = false;
    _controller.stop();

    sampleCard = [
      Container(
        height: 60,
        width: 40,
        color: Colors.red,
      ),
      Transform.rotate(
          angle: 10 * (pi / 180),
          child: Container(
            height: 60,
            width: 40,
            color: Colors.blueGrey,
          )),
      SlideTransition(
        position: halfWayAnimation ? _offsetAnimation2 : _offsetAnimation,
        child: Container(
          height: 60,
          width: 40,
          color: Colors.yellow,
        ),
      ),
    ];
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  Future<void> _playAnimation() async {
    try {
      await _controller.forward().orCancel;
      await siftingIndex();
      await _controller.reverse().orCancel;
    } on TickerCanceled {
      // the animation got canceled, probably because it was disposed of
    }
  }

  Future<void> siftingIndex() {
    return Future.delayed(const Duration(microseconds: 200), () {
      sampleCard.insert(0, sampleCard[sampleCard.length - 1]);
      sampleCard.removeLast();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(180.0),
        child: SafeArea(
          child: TextButton(
            child: Text('back to login'),
            onPressed: () {
              Navigator.pushNamed(context, LoginScreen.id);
            },
          ),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Stack(children: sampleCard),
          CustomScrollWheel(
            onItemChange: (x) {
              setState(() {
                _playAnimation();
                halfWayAnimation = true;
              });
            },
            scrollController: _scrollController,
          ),
        ],
      ),
    );
  }
}

在此处输入图像描述

标签： flutterdartflutter-animation