Riveのアニメーションの設定がうまくできません
苦戦中です
今できているもの
animationを切り替えてコントロールするよりも、
RiveのStateMachineでコントロールしたほうが扱いやすいのでStateMachineの設定をしました
まだ苦戦中です
— おとぼう (@otobou0320) August 10, 2021
Rive難しい
Flutterで売れるアプリを作ってみようPart12 コマを置いたときにアニメーションをしたかった StateMachine編 https://t.co/lPQvhVbBLA pic.twitter.com/wtahLGo49D
学んだこと
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,
),
),
);
}
}
次にやること
アニメーションを動かす
コメント