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를 사용하는 경우 .exode 파일을 직접 가져올 수 있도록 exodeui/vite-plugin의 exodePlugin()을 Vite 구성에 추가하세요. 그렇지 않으면 src 소품을 사용하여 파일에 URL을 전달합니다.
- ExodeUICanvas 소품: src(URL) 또는 artboard(가져온 데이터), fit, alignment, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI는 setEngine과 함께 setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger 및 getInputValue를 반환합니다.
- 입력 이름은 파일에 정의된 이름과 일치해야 합니다.
부울, 숫자 및 트리거
로드 중과 같이 계속 유지되는 상태에는 부울을 사용합니다. 0에서 100까지의 진행과 같은 연속 값에는 숫자를 사용하십시오. 한 번 실행되고 재설정되는 성공과 같은 일회성 순간에는 트리거를 사용하십시오. React에서는 상태에 따라 효과에 부울과 숫자를 설정하고 이벤트가 발생하는 핸들러에서 트리거를 실행합니다.
React로 돌아가는 이벤트
또한 애니메이션은 파일 내부의 버튼이 눌렸거나 성공 애니메이션이 완료된 등 어떤 일이 발생했음을 코드에 알려줄 수도 있습니다. 트리거 이름을 수신하는 onTrigger를 사용하여 이를 처리하고 API 호출과 같은 실제 작업을 React 코드에 유지합니다.
테스트 및 접근성
모션은 입력에 의해 구동되기 때문에 각 상태에 어떤 입력이 설정되어 있는지 확인하여 React 측을 테스트할 수 있습니다. DOM에 실제 버튼과 라벨을 유지하거나 화면 판독기용으로 시각적으로 숨겨진 HTML 레이어를 생성할 수 있는 ExodeSEO 구성 요소를 사용하세요. 파일이 정의한 경우 사용자 시스템 설정에서 감소된 모션 부울을 전달합니다.
프로덕션 구현 예시
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>
);
}기억할 핵심 원칙
- ExodeUICanvas로 렌더링하고 setEngine을 useExodeUI에서 onReady로 전달합니다.
- 진행 중인 상태에 대한 부울, 연속 값에 대한 숫자, 순간에 대한 트리거
- React 효과 및 핸들러에서 입력을 설정합니다. React 상태는 정보의 소스로 유지됩니다.
- onTrigger를 사용하여 파일의 이벤트 처리
- React에 앱 로직을 유지하고 파일에 모션을 유지합니다.
자주 묻는 질문
출처
- exodeui (React runtime) — npm