Архитектура пользовательского интерфейса конечного автомата: выход за рамки Rive WebAssembly
Изучите архитектуру пользовательского интерфейса конечного автомата. Как визуальные конечные автоматы, макет и физика передаются из одного файла в React, Vue и нативные приложения.
Главное
Хотя Rive стал пионером визуальных конечных автоматов для интерактивной векторной графики, его зависимость от изолированного холста WebGL/Skia создает узкие места в области доступности и размера пакета для производственных веб-приложений. Современный пользовательский интерфейс конечного автомата хранит граф визуального состояния в одном файле, который приложение передает через входные данные и события.
Почему конечные автоматы изменили моушн-дизайн
До появления конечных автоматов логика взаимодействия представляла собой хаотическую сеть логических переменных (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)}
/>
);
}