如何停止动画并使动画淡入淡出。我正在使用加载动画从Internet提取数据

Question

我需要从互联网上获取数据后停止此动画。由于它是定制控件，因此无法在其中添加动画控制器。我已经在此类之外制作了initstate函数

  class CryptoCard extends StatelessWidget {
  const CryptoCard({
    this.value,
    this.selectedCurrency,
    this.cryptoCurrency,
    this.icon,
    this.anime,
  });

  final String value;
  final String icon;
  final String anime;
  final String selectedCurrency;
  final String cryptoCurrency;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(18.0, 18.0, 18.0, 0),
      child: Card(
          color: Colors.black,
          elevation: 5.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Row(children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(left: 35, right: 20),
              child: Image.asset('$icon', width: 30, height: 30),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10),
              child: LoadingBouncingGrid.circle(              <<--animation widget here...
                duration: Duration(milliseconds: 500),
                borderColor: Colors.blue,
                size: 20,
                backgroundColor: Colors.blueAccent,
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
              child: Text(
                '1 $cryptoCurrency = $value $selectedCurrency',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
            ),
          ])),
    );
  }
}

我使用anime（）函数提供布尔值来告知所获取的数据

@override
  void initState() {
    super.initState();
    getData();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    )..addListener(() => setState(() {}));
    animation = Tween<double>(
      begin: 80.0,
      end: 120.0,
    ).animate(animationController);

    animationController.forward();
  }

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

  Column makeCards() {
    List<CryptoCard> cryptoCards = [];

    for (String crypto in cryptoList) {
      cryptoCards.add(
        CryptoCard(
          icon: chose(crypto),
          cryptoCurrency: crypto,
          selectedCurrency: selectedCurrency,
          value: isWaiting ? '?' : coinValues[crypto],
          anime: anime(isWaiting),                         <<----this gives back boolean about weather data fetched or not
        ),
      );
    }

我需要停止动画并在获取数据后淡出

Screenshot for reference

Answer 1

您可以在github上检查此库。SpinKit library