从 React 状态控制 ExodeUI 状态机输入
使用 exodeui 包在 React 中播放 ExodeUI 文件的实用指南：从 React 状态设置布尔值、数字和触发器输入，以及处理事件。
核心要点
安装 exodeui 包，使用 <ExodeUICanvas> 渲染文件，并通过将 setEngine 传递给 onReady 来使用 useExodeUI 挂钩获取引擎。然后从 React 效果和处理程序调用 setInputBool、setInputNumber 或 fireTrigger 来驱动状态机，并使用 onTrigger 监听事件。你的 React 状态仍然是事实的来源；该文件拥有该动议。
模型：你的代码拥有数据，文件拥有运动
ExodeUI 文件包含层、状态、转换以及在它们之间切换的输入。您的 React 组件根据其自身的状态决定这些输入何时发生变化。这种拆分使动画代码远离组件，并让设计人员无需接触 React 即可更改运动。
设置
使用 npm install exodeui 安装 React 运行时。如果您使用 Vite，请将 exodeui/vite-plugin 中的 exodePlugin() 添加到您的 Vite 配置中，以便可以直接导入 .exode 文件；否则使用 src 属性将 URL 传递给文件。
- ExodeUICanvas 道具：src（URL）或画板（导入的数据）、fit、alignment、autoPlay、onReady、onTrigger、onInputUpdate。
- useExodeUI 返回 setEngine 加上 setInputBool、setInputNumber、setInputText、setInputNumberArray、setInputStringArray、fireTrigger 和 getInputValue。
- 输入名称必须与文件中定义的名称匹配。
布尔值、数字和触发器
使用布尔值表示保持打开的状态，例如“正在加载”。使用数字表示连续值，例如从 0 到 100 的进度。使用触发器表示一次性时刻，例如 Success，它触发一次并重置。在 React 中，根据状态设置布尔值和数字，并在事件发生的处理程序中触发触发器。
事件返回React
动画还可以告诉您的代码发生了某些事情，例如按下了文件内的按钮或成功动画完成。使用 onTrigger 处理这些，它接收触发器名称，并将实际工作（例如 API 调用）保留在 React 代码中。
测试和可访问性
由于运动是由输入驱动的，因此您可以通过检查为每个状态设置了哪些输入来测试 React 侧。在 DOM 中保留真实的按钮和标签，或者使用 ExodeSEO 组件，它可以为屏幕阅读器生成视觉上隐藏的 HTML 层。如果您的文件定义了一个简化运动布尔值，则从用户的系统设置传递一个简化运动布尔值。
生产实施片段
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // needs exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, progress, justSaved, onSave }) {
const { setEngine, setInputBool, setInputNumber, fireTrigger } = useExodeUI();
// Boolean: a state that stays on while saving
useEffect(() => { setInputBool('Loading', saving); }, [saving, setInputBool]);
// Number: continuous progress, 0 to 100
useEffect(() => { setInputNumber('Progress', progress); }, [progress, setInputNumber]);
// Trigger: a one-off moment
useEffect(() => { if (justSaved) fireTrigger('Success'); }, [justSaved, fireTrigger]);
return (
<div style={{ width: 240, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => { if (name === 'Pressed') onSave(); }}
/>
</div>
);
}要记住的关键 Principle
- 使用 ExodeUICanvas 进行渲染，并将 setEngine 从 useExodeUI 传递到 onReady
- 布尔值表示持续状态，数字表示连续值，触发器表示时刻
- 设置来自 React 效果和处理程序的输入； React 状态仍然是真相来源
- 使用 onTrigger 处理文件中的事件
- 将应用程序逻辑保留在 React 中，将动作保留在文件中
常见问题解答
来源
- exodeui (React runtime) — npm