Android平台能否通过代码动态修改Rive动画元素参数？

要实现动态修改Rive动画里元素的颜色，核心是先在Rive编辑器中给目标元素的颜色绑定一个可编辑的变量，再通过代码获取这个变量并更新值。以下是具体步骤和多平台代码示例：

第一步：在Rive编辑器中配置颜色变量 #

• 打开你的Rive动画文件，选中需要改色的元素（比如形状填充、描边）
• 在右侧属性面板找到颜色选项，点击旁边的「绑定」图标（链条形状）
• 创建一个新的颜色类型变量，给它起个清晰的名字（比如primary_element_color）
• 保存Rive文件，确保变量已成功关联到目标元素的颜色属性

第二步：代码实现（分平台） #

Web端（JavaScript） #

// 初始化Rive动画
const riveInstance = new rive.Rive({
  src: 'your-animation-file.riv',
  canvas: document.getElementById('rive-container'),
  autoplay: true,
  onLoad: () => {
    // 找到对应的状态机和颜色变量
    const stateMachineInputs = riveInstance.stateMachineInputs('Your State Machine Name');
    const targetColorVar = stateMachineInputs.find(input => input.name === 'primary_element_color');
    
    // 修改颜色：传入RGBA值（范围0-1）
    if (targetColorVar) {
      targetColorVar.value = new rive.Color(0.9, 0.2, 0.2, 1); // 亮红色
    }
  }
});

// 后续可随时修改颜色，比如按钮点击事件
document.getElementById('change-color-btn').addEventListener('click', () => {
  const targetColorVar = riveInstance.stateMachineInputs('Your State Machine Name').find(input => input.name === 'primary_element_color');
  if (targetColorVar) {
    targetColorVar.value = new rive.Color(0.2, 0.7, 0.9, 1); // 浅蓝色
  }
});

Flutter端 #

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

class DynamicRiveColor extends StatefulWidget {
  const DynamicRiveColor({super.key});

  @override
  State<DynamicRiveColor> createState() => _DynamicRiveColorState();
}

class _DynamicRiveColorState extends State<DynamicRiveColor> {
  StateMachineController? _riveController;
  SMIColor? _colorInput;

  @override
  void initState() {
    super.initState();
    _setupRive();
  }

  void _setupRive() async {
    final riveFile = await RiveFile.asset('assets/your-animation.riv');
    final artboard = riveFile.mainArtboard;
    
    // 获取状态机控制器
    _riveController = StateMachineController.fromArtboard(artboard, 'Your State Machine Name');
    if (_riveController != null) {
      artboard.addController(_riveController!);
      // 找到颜色变量
      _colorInput = _riveController!.findInput('primary_element_color') as SMIColor;
      // 初始设置颜色
      _colorInput?.value = Colors.orange.value;
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _riveController != null 
            ? Rive(artboard: _riveController!.artboard) 
            : const CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 点击切换颜色
          setState(() {
            _colorInput?.value = Colors.purple.value;
          });
        },
        child: const Icon(Icons.palette),
      ),
    );
  }

  @override
  void dispose() {
    _riveController?.dispose();
    super.dispose();
  }
}

注意事项 #

• 状态机名称和变量名称必须与Rive编辑器里的完全一致，大小写敏感
• Web端的颜色值范围是0-1（比如红色是1,0,0,1），需使用Rive提供的rive.Color类
• Flutter端要将Color对象的value属性传入SMIColor，因为Rive的颜色变量接收int类型的ARGB值

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