Rive 클러스터10분 읽기·ExodeUI 팀
상태 머신 UI 아키텍처: Rive WebAssembly를 넘어
상태 머신 UI 아키텍처를 살펴보세요. 시각적 상태 기계, 레이아웃 및 물리학이 하나의 파일에서 React, Vue 및 기본 앱으로 전달되는 방법.
핵심 요약과 정의
핵심 포인트
Rive는 대화형 벡터 그래픽을 위한 시각적 유한 상태 머신을 개척했지만 격리된 WebGL/Skia 캔버스에 의존하므로 프로덕션 웹 앱에 대한 접근성 및 번들 크기 병목 현상이 발생합니다. 최신 상태 시스템 UI는 앱이 입력 및 이벤트를 통해 구동하는 하나의 파일에 시각적 상태 그래프를 유지합니다.
상태 머신이 모션 디자인을 변화시킨 이유
상태 머신 이전에는 상호 작용 논리가 부울 변수(isHovered, isClicked, isExpanded, isError)의 혼란스러운 웹이었습니다. 상태 머신은 공식적인 수학적 명확성을 제공합니다. 구성 요소에는 정의된 상태, 개별 전환 및 결정론적 트리거가 있습니다.
프로덕션 구현 예시
인터랙티브 컴포넌트 구현
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function CheckoutButton() {
return (
<ExodeUICanvas
src="/checkout.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}