能否通过JavaScript/Flutter/Dart向Flare动画注入用户输入的动态文本？

完全可以实现！其实Flare（现在已经升级成Rive啦）本身就支持动态注入数据，刚好能满足你说的「在动画特定时刻显示用户输入姓名」的需求，我给你分JavaScript和Flutter/Dart两种场景讲具体做法：

一、JavaScript 实现方式 #

先划重点：你得先在Rive编辑器里给动画里的手机屏幕区域加一个文本组件，给它起个唯一的名字（比如usernameText），这是代码能定位到它的关键！

接下来在JS里这么搞：

// 初始化Rive控制器
const flareElement = document.getElementById('flare-animation');
const controller = new rive.Rive({
  src: 'filip.flr', // 替换成你的动画文件路径
  canvas: flareElement,
  autoplay: true,
  onLoad: () => {
    // 获取预先命名的文本组件
    const textComponent = controller.findComponent('usernameText');
    
    // 监听文本框输入，实时保存用户输入的姓名
    const nameInput = document.getElementById('name-input');
    nameInput.addEventListener('input', (e) => {
      // 如果要实时同步文本，直接在这里更新；如果要特定时刻更新，就先存起来
      textComponent.text = e.target.value || '匿名用户';
    });

    // 可选：如果需要在动画特定帧/状态才显示文本，监听动画状态变化
    controller.onStateChange = (stateMachineName, stateName) => {
      // 比如当动画进入「展示手机」的状态时，再更新文本
      if (stateName === 'showPhone') {
        textComponent.text = nameInput.value || 'Guest';
      }
    };
  }
});

二、Flutter/Dart 实现方式 #

同样第一步：在Rive编辑器里配置好文本组件并命名。然后在Flutter项目中操作：

1. 先在pubspec.yaml里添加最新的Rive依赖：

dependencies:
  flutter:
    sdk: flutter
  rive: ^latest_version # 替换成当前最新版本号

2. 编写核心代码：

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

class FlareNameInjector extends StatefulWidget {
  @override
  _FlareNameInjectorState createState() => _FlareNameInjectorState();
}

class _FlareNameInjectorState extends State<FlareNameInjector> {
  late RiveAnimationController _animationController;
  final TextEditingController _nameController = TextEditingController();
  SMIInput<String>? _usernameInput; // 绑定Rive里的文本组件

  @override
  void initState() {
    super.initState();
    // 加载动画并获取状态机控制器
    final artboard = Artboard.fromFile('assets/filip.flr');
    _animationController = StateMachineController.fromArtboard(
      artboard,
      'State Machine 1', // 替换成你动画里的状态机名称
    )!;
    // 通过名称找到文本输入组件
    _usernameInput = _animationController.findInput('usernameText');
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextField(
          controller: _nameController,
          decoration: const InputDecoration(labelText: '输入你的姓名'),
          onChanged: (value) {
            // 实时更新文本，或者在特定时机触发更新
            _usernameInput?.value = value;
          },
        ),
        const SizedBox(height: 20),
        Rive(
          artboard: (_animationController as StateMachineController).artboard,
          controllers: [_animationController],
          width: 300,
          height: 300,
        ),
      ],
    );
  }
}

几个关键注意事项 #

• 一定要在Rive编辑器里给文本组件开启可编辑属性，并且命名唯一，不然代码找不到对应的组件
• 如果要精准控制文本显示的时机，一定要监听动画的状态机状态变化，确保文本在正确的帧出现
• 现在Flare已经全面升级为Rive，建议使用最新的Rive SDK，API更稳定且功能更全

内容的提问来源于stack exchange，提问作者yavg