Как запустить одну и ту же анимацию несколько раз одновременно

Question

В настоящее время я работаю над анимацией удара / урона во Флаттере.Я хочу, чтобы каждый раз, когда экран касался, он выдает анимацию, показывающую целое число.Я не мог найти способ заставить это работать.Пока каждый раз, когда я нажимаю на экран, анимация начинается с остановки предыдущей.Я использую шаблон BLoC внутри проекта, чтобы эта анимация создавалась потоковым построителем.

Вот мой текущий код:

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.Посмотрите на пример ниже - вам нужно реализовать нечто подобное.Кстати, синтаксис ... для расширения списка является новым в дротике, поэтому вам нужно обновить версию SDK в pubspec.yaml

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}',
            ),
          ),
        );
      },
    );
  }
}

Answer 2

Может быть, вы могли бы попробовать добавить StatusListeners к анимации, или вы могли бы вместо этого сбрасывать и запускать анимацию каждый раз, когда вы нажимаете на экран, например:

onTap: () {
      streamController.sink.add(Random().nextInt(5));
      animationController.reset();
      animationController.forward(from: 0.0);
    },

Я не мог попробовать это самостоятельнона данный момент, но я думаю, что это способ сделать это.

Извините, что потратил ваше время, если оно не работает.