Воспроизведение той же анимации Flare в Flutter - PullRequest
Новая
       15

Воспроизведение той же анимации Flare в Flutter

0 голосов
/ 22 марта 2019

Я пытаюсь воспроизвести анимацию Flare в Flutter. Не зацикливать анимацию, когда она завершена. Я хочу, чтобы анимация воспроизводилась по требованию, та же анимация.

Когда я переключаюсь между анимациями, все работает нормально, просто меняя строку и вызывая setState. Есть ли простой способ сделать это.

Вот что я сейчас делаю. 

class _FlareDemoState extends State<FlareDemo> {

  String animationToPlay = 'activate';

  @override
  Widget build(BuildContext context) {

    print('Animation to play: $animationToPlay');

    return Scaffold(
      backgroundColor: Colors.purple,
      body: GestureDetector(
        onTap: () {
          setState(() {

          });
        },
        child: FlareActor('assets/button-animation.flr',
            animation: animationToPlay)));
   }
}

Мои журналы появляются, когда я нажимаю на анимацию 

I/flutter (18959): Animation to play: activate
I/flutter (18959): Animation to play: activate
I/chatty  (18959): uid=10088(com.example.flare_tutorial) Thread-2 identical 2 lines
I/flutter (18959): Animation to play: activate
I/flutter (18959): Animation to play: activate
I/chatty  (18959): uid=10088(com.example.flare_tutorial) Thread-2 identical 7 lines
I/flutter (18959): Animation to play: activate
I/flutter (18959): Animation to play: activate
Reloaded 2 of 495 libraries in 672ms.
I/flutter (18959): Animation to play: activate

Все называется, проигрывается в первый раз, но после этого анимация не воспроизводится.

Ответы [ 2 ]

2 голосов
/ 22 марта 2019

Более чистый способ сделать это - использовать собственный FlareController.Есть конкретная реализация FlareControls, которая прекрасно подходит для этого варианта использования.

class _MyHomePageState extends State<MyHomePage> {
  // Store a reference to some controls for the Flare widget
  final FlareControls controls = FlareControls();

  void _playSuccessAnimation() {
    // Use the controls to trigger an animation.
    controls.play("success");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FlareActor("assets/Teddy.flr",
          animation: "idle",
          fit: BoxFit.contain,
          alignment: Alignment.center,
          // Make sure you use the controls with the Flare Actor widget.
          controller: controls),
      floatingActionButton: FloatingActionButton(
        onPressed: _playSuccessAnimation,
        tooltip: 'Play',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

Обратите внимание, что в этом примере также воспроизводится фоновая анимация в режиме ожидания, которая зацикливается.Любой вызов FlareControls.play будет смешивать входящую анимацию с этой фоновой анимацией простоя.Вы просто пропускаете анимацию: аргумент "бездействия", если вам не нужна / не нужна фоновая анимация.

Полный пример здесь: https://github.com/luigi-rosso/flare_controls

0 голосов
/ 22 марта 2019

На основании ответа @Eugene я нашел временное решение.Я установил значение пустым, запустил таймер на 50 мс, а затем вернул значение к анимации, которую я хотел воспроизвести снова. 

class _FlareDemoState extends State<FlareDemo> {

String animationToPlay = 'activate';

@override
Widget build(BuildContext context) {

print('Animation to play: $animationToPlay');

return Scaffold(
  backgroundColor: Colors.purple,
  body: GestureDetector(
    onTap: () {
      _setAnimationToPlay('activate');
    },
    child: FlareActor('assets/button-animation.flr',
        animation: animationToPlay)));
  }
}

void _setAnimationToPlay(String animation) {
  if (animation == _animationToPlay) {
    _animationToPlay = '';
    Timer(const Duration(milliseconds: 50), () {
      setState(() {
        _animationToPlay = animation;
      });
    });
  } else {
    _animationToPlay = animation;
  }
}

Это грязный обходной путь, но он выполняет свою работу.Спасибо, Юджин, за посадку семян.

...