表に書かれた愛嬌
外から入る値は3つしかない。カーソルの位置、なでたかどうか、ボタンに重なっているかどうか。
人格に見えているものの中身は、下の5行の表と、目標のポーズへ向かうバネだけでできている。
構造の覚え書き
- 入力
- number / boolean / trigger の3種しかない。外の世界はこの型だけで表せる。
- ステート
- 「そのときの目標ポーズ」を返すだけの関数。互いを一切知らない。
- 遷移
- 上から順に評価する表。詰まるのはいつも条件ではなく優先順位のほう。
- 補間
- 目標ポーズへ全パラメータをバネで寄せる。キーフレームは一枚も無い。
- 持続
dur のあるステートは再生し終わるまで遷移を止める。- 骨
- SVG の
<g> をそのまま骨として使い、回転と拡縮だけで動かす。
この三層（入力・ステート・遷移）の分け方は Rive の State Machine から借りている。
形を潰したり伸ばしたりしないうちは、この範囲でコードのまま書けてしまう。