Rive クラスター10 分で読めます·ExodeUI チーム
ステート マシン UI アーキテクチャ: Rive WebAssembly を超えて
ステート マシンの UI アーキテクチャを調べます。ビジュアル ステート マシン、レイアウト、物理学が 1 つのファイルから React、Vue、ネイティブ アプリにどのように組み込まれるか。
要点まとめ
核心
Rive はインタラクティブなベクター グラフィックスのためのビジュアル有限ステート マシンの先駆者ですが、分離された WebGL/Skia キャンバスに依存しているため、運用 Web アプリのアクセシビリティとバンドル サイズのボトルネックが生じています。最新のステート マシン UI は、アプリが入力とイベントを通じて駆動する 1 つのファイルに視覚的な状態グラフを保持します。
ステートマシンがモーションデザインを変革した理由
ステート マシンが登場する前は、インタラクション ロジックはブール変数 (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)}
/>
);
}