dart - 如何在动画中一个接一个地显示动画

Question

我已经将数组映射到一个类，并且正在相应地显示动画，但是动画可一次用于整个对象。我希望在后续动画之间有一个延迟。

The screenshot of the game is here. The stars should appear with animation one after the other我正在使用的代码是:

for (var i = 0; i < 4; i++) {
  myScore > (10*i) ? stars.add("true") : stars.add("false");      
}

Widget _buildItem(int index, String text) {
return new MyButton(
    key: new ValueKey<int>(index),
    text: text,
    keys: keys++,
    onPress: () {

    }
    );

}

    class MyButton extends StatefulWidget {

      MyButton(
          {Key key,
          this.text,
          this.keys,
          this.onPress})
          : super(key: key);
      final String text;
      final VoidCallback onPress;
      int keys;
      @override
      _MyButtonState createState() => new _MyButtonState();
    }

class _MyButtonState extends State<MyButton> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  String _displayText;

  initState() {
    super.initState();
    print("_MyButtonState.initState: ${widget.text}");
    _displayText = widget.text;

    controller = new AnimationController(
        duration: new Duration(milliseconds: 600), vsync: this);

    animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn)
      ..addStatusListener((state) {
//        print("$state:${animation.value}");
        if (state == AnimationStatus.dismissed) {
          print('dismissed');
          if (widget.text != null) {
            setState(() => _displayText = widget.text);
            controller.forward();
          }
        }
      });
  }

   @override
    void didUpdateWidget(MyButton oldWidget) {
      super.didUpdateWidget(oldWidget);
     // sleep(const Duration(microseconds: 10)); //I tried adding a delay here but instead it delays the entire thing.
    }

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

  @override
  Widget build(BuildContext context) {
    Size media = MediaQuery.of(context).size;
    double ht = media.height;
    double wd = media.width;
    widget.keys++;
    print("_MyButtonState.build");    
    return new Shake(
      animation: animation,
      child: new GestureDetector(

     child: new Container(

     child: new FlatButton(
         onPressed: () => widget.onPress(),
         color: Colors.transparent,

         child: new Icon(
        _displayText == "true" ? Icons.star : Icons.star_border,
        key: new Key("${widget.keys}"),
        size: ht > wd ? ht * 0.05 : wd * 0.05,
        color: Colors.black,
         )

    ),)
    ) );
  }
}

Answer 1

使用Flutter中的交错动画进行一系列操作，而不是一次执行所有操作。按照Staggered Animations链接使用Flutter构建交错动画。