Flutterで売れるアプリを作ってみようPart12　コマを置いたときにアニメーションをしたかった StateMachine編

Riveのアニメーションの設定がうまくできません

苦戦中です

最初はこちら、前回はこちら、次回はこちらを参照してください

今できているもの

animationを切り替えてコントロールするよりも、

RiveのStateMachineでコントロールしたほうが扱いやすいのでStateMachineの設定をしました

まだ苦戦中です
Rive難しい

Flutterで売れるアプリを作ってみようPart12　コマを置いたときにアニメーションをしたかった StateMachine編 https://t.co/lPQvhVbBLA pic.twitter.com/wtahLGo49D

— おとぼう (@otobou0320) August 10, 2021

学んだこと

StateMachineの動かし方

検証に使ったRiveファイルはこちらです

StateMachine名がdrive、InputsにTrigger型のBumpが設定されています

以下のコードでタップ時にトラックが跳ねるアニメーションが発生します

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class SimpleStateMachine extends StatefulWidget {
  const SimpleStateMachine({Key? key}) : super(key: key);

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

class _SimpleStateMachineState extends State<SimpleStateMachine> {
  SMITrigger? _bump;

  void _onRiveInit(Artboard artboard) {
    final controller = StateMachineController.fromArtboard(artboard, 'drive');
    artboard.addController(controller!);
    _bump = controller.findInput<bool>('Bump') as SMITrigger;

  }

  void _hitBump() => _bump?.fire();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Animation'),
      ),
      body: Center(
        child: GestureDetector(
          child: RiveAnimation.asset(
            'assets/truck.riv',
            fit: BoxFit.cover,
            onInit: _onRiveInit,
          ),
          onTap: _hitBump,
        ),
      ),
    );
  }
}

次にやること

アニメーションを動かす