flutter - 如何同时多次启动同一个动画

Question

我目前正在 Flutter 中制作命中/伤害动画。我希望每次点击屏幕时，它都会抛出一个显示整数的动画。我找不到让它工作的方法。现在每次我点击屏幕时，动画都会重新开始停止前一个。我在项目中使用了 BLoC 模式，所以这个动画是由 streambuilder 抛出的。

这是我当前的代码:

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final StreamController<int> streamController = StreamController<int>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetector(
        onTap: () {
          streamController.sink.add(Random().nextInt(5));
        },
        child: Scaffold(
          body: Center(
            child: StreamBuilder<int>(
              stream: streamController.stream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return DamageAnimated(snapshot.data);
                }
                return Container();
              },
            ),
          ),
        ),
      ),
    );
  }
}

class DamageAnimated extends StatefulWidget {
  const DamageAnimated(this.damage);
  final int damage;

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

class _DamageAnimatedState extends State<DamageAnimated> with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    animationController.forward(from: 0.0);
    return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
        return Transform.translate(
          offset: Offset(0, -100 * animationController.value),
          child: Opacity(
            opacity: 1 - animationController.value,
            child: Text(
              '${widget.damage}',
            ),
          ),j
        );
      },
    );
  }
}

这显示了一个向上平移并同时消失的整数，但我不知道如何让同一个动画同时运行多次。

Answer 1

您只会返回 1 个 DamageAnimated。看看下面的例子——你需要实现类似的东西。顺便说一句，扩展列表的 ... 语法在 dart 中是新的，因此您需要更新 pubspec.yaml 中的 sdk 版本

environment:
  sdk: ">=2.2.2 <3.0.0"

我已经在 iOS 而非 Android 上对此进行了测试，但没有理由认为它不能正常工作。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _anims = [];
  int _count = 0;
  int _animationsRunning = 0;

  void animationEnded() {
    _animationsRunning--;
    if (_animationsRunning == 0) {
      setState(() {
        _anims = [];
      });
      print('all animations completed - removing widget from stack (now has ${_anims.length} elements)');
    }
  }

  void _startAnimation() {
    setState(() {
      _anims.add(DamageAnimated(_count, animationEnded));
      _count++;
      _animationsRunning++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            ..._anims,
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _startAnimation,
        tooltip: 'Start animation',
        child: Icon(Icons.add),
      ),
    );
  }
}

class DamageAnimated extends StatefulWidget {
  const DamageAnimated(this.damage, this.endedCallback);
  final int damage;
  final VoidCallback endedCallback;

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

class _DamageAnimatedState extends State<DamageAnimated> with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed)
        if (mounted) {
          widget.endedCallback();
        }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    animationController.forward(from: 0.0);
    return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
        return Transform.translate(
          offset: Offset(0, -100 * animationController.value),
          child: Opacity(
            opacity: 1 - animationController.value,
            child: Text(
              '${widget.damage}',
            ),
          ),
        );
      },
    );
  }
}