Блог

У меня есть приложение, в котором у меня есть анимированная галочка, сделанная в rive. Это анимация с одним кадром, и я хочу воспроизвести ее и оставить в конце анимации, как только она будет завершена, а затем также иметь возможность изменить ее, когда пользователь снова щелкнет по ней. Я попытался использовать SimpleAnimation, но я также не смог добиться того, чего я хочу, но это осталось после того, как анимация была сделана. Однако я не знаю, как воспроизвести анимацию, а затем повернуть ее вспять или воспроизвести другую анимацию.

Галочка выглядит примерно так: https://cln.sh/MwLFNs

Это две отдельные анимации, но они вставлены в копию, но в обратном порядке, поэтому я могу использовать либо одну, либо обе.

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

Спасибо за помощь!

вы можете использовать государственные машины, получить состояние и решить, что делать, когда захотите

 // Getting state machine
  void _onRiveInit(Artboard artboard) async {
    final controller =
        StateMachineController.fromArtboard(artboard, 'State Machine 1');

    if (controller != null) {
      artboard.addController(controller);
      _lick = controller.findInput<bool>('Lick') as SMITrigger;
    }
  }

  void _onHandlerStateMachine() => _lick?.value = !_lick!.value;
 

_onRiveInit-это функция, которая запускается при загрузке файла Rive,
после того, как вы подключаете контроллер к конечному автомату для изменения его состояния (важно, чтобы имя конечного автомата совпадало с именем конечного автомата анимации)
и для изменения значения триггера вы должны получить ссылку на этот способ.

_lick = контроллер.findInput(«Лизать») в качестве кузнечного грифа;

тогда вы можете использовать

void _onHandlerStateMachine() => _lick?.значение = !_lick!.значение;

чтобы включить или удалить анимацию в любое время, также у вас может быть несколько триггеров. Если вам нужно, чтобы ваша анимация сделала что-то, а через некоторое время сделала что-то еще, вы можете использовать функцию разборки

 _debouncer.run(() {
      _onHandlerStateMachine()
    });
 

**Не забудьте обновить представление, если вы используете управление состоянием

когда загружается файл rive

 // Loads a Rive file
  Future<void> _loadRiveFile() async {
    final bytes = await rootBundle.load(riveFileName);
    RiveFile rFile = RiveFile.import(bytes);

    final artboard = rFile.mainArtboard;
    _onRiveInit(artboard);

    globalArtboard = artboard
      ..addController(
        _animationController = SimpleAnimation('idle'),
      );    
  }
 

Вот у меня и пример Рив-анимации Тедди, использующей Флаттер с провайдером
https://github.com/alcampospalacios/flutter-rive-animations