Flutter 之 Rive Guide动画状态机初体验记录

插件安装

flutter rive插件地址：点击访问

效果

代码

这是使用本地assets的riv文件代码案例

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

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

  @override
  State<RiveDemo> createState() => _RiveDemoState();
}

class _RiveDemoState extends State<RiveDemo> {
  SMITrigger? _explosion;
  SMITrigger? _reset;

  void _onRiveInit(Artboard artboard) {
    final controller = StateMachineController.fromArtboard(
      artboard,
      'State Machine 1',
      onStateChange: (String stateMachineName, String stateName) {
        Logger().i('State Changed in $stateMachineName to $stateName');
      },
    );

    if(controller != null) {
      artboard.addController(controller);
      _explosion = controller.findInput<bool>('Trigger explosion') as SMITrigger;
      _reset = controller.findInput<bool>('Reset') as SMITrigger;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("rive动画"),
      ),
        body: Container(
          width: MediaQuery.of(context).size.width,
          child: ListView(
            shrinkWrap: true,
            children: [
              Card(
                color: Colors.white30,
                child: Column(
                  children: [
                    SizedBox(
                      height: 200,
                      child: RiveAnimation.asset(
                        "assets/rive/congratulations.riv",
                        fit: BoxFit.fitHeight,
                        onInit: _onRiveInit,
                      ),
                    ),
                    Row(
                      children: [
                        CupertinoButton(child: const Text("触发"), onPressed: () {
                          _explosion?.value = true;
                        }),
                        CupertinoButton(child: const Text("重置"), onPressed: () {
                          _reset?.value = true;
                        })
                      ],
                    )
                  ],
                ),
              )
              ],
          ),
        )
    );
  }
}

代码参数说明

StateMachineController.fromArtboard()第二参数’State Machine 1’为状态机控制器名称，需与riv文件定义的控制器名称完全一致

_explosion = controller.findInput(‘Trigger explosion’) as SMITrigger;
_reset = controller.findInput(‘Reset’) as SMITrigger;
这分别对应状态机控制器下的各状态开关，不同的动画设计状态控制可以是单选、多选、填数值，该案例动画为单选控制；'Trigger explosion’及’Reset’分别对应riv动画文件设计时设置的状态名称；

_explosion?.value = true;
_reset?.value = true;
通过改变选中值可以实现切换动画的效果

onStateChange事件可以监听到状态是否有发生改变。