printemps lab · interactive animation
Rive は、デザインしたアニメーションをステートマシン付きの軽量バイナリ (.riv) として書き出し、Web/モバイル/ゲームのランタイムで動かす仕組みです。 動画やLottieと違い、ユーザー操作やデータに反応してその場で表情を変えるのが特徴。 このページのアニメーションはすべて@rive-app/canvasがブラウザ上でリアルタイム描画しています。
アニメーションをただ再生するのではなく、ステートマシンが入力(数値/真偽/トリガー)に応じて 遷移します。ボタン1つ・ホバー1つで滑らかに表情が変わります。
ベクター主体のバイナリは数十KB。動画やGIFと比べて桁違いに小さく、どんな解像度でも ぼやけず 60fps で滑らかに動きます。
データバインディングで値を流し込み、Rive Events でアニメ側からJSへ通知。 UI・ゲーム・データビジュアライズまで、コードとアニメが対話します。
Web/iOS/Android/Flutter/React Native/Unity が同じ .riv を共有。 デザイナーが Rive エディタで作り、エンジニアはランタイムで繋ぐだけ。
各デモは実際の .riv をその場で読み込み、検出した入力から操作UIを自動生成しています。
bumpyのトリガーbumpを発火すると、トラックが跳ねます。トリガーは「1回きりの合図」です。初期化中…
const inputs = rive.stateMachineInputs("bumpy");
const bump = inputs.find(i => i.name === "bump");
bump.fire();Levelを0 / 1 / 2と動かすと、ビギナー・中級・ エキスパートへ切り替わります。スライダーは検出した数値入力に自動で割り当てています。初期化中…
const level = rive
.stateMachineInputs("Designer's Test")
.find(i => i.name === "Level");
level.value = 2; // 0:Beginner 1:Intermediate 2:Expert上のキャンバスの星にマウスを乗せる / クリックする
初期化中…
// Listeners は .riv に内蔵。 // canvas へのマウスイベントは // ランタイムが自動で state machine へ転送する
Day to NightなどのRive Eventがアニメ側から発火します。右下のログに流れます。初期化中…
rive.on(EventType.RiveEvent, (e) => {
const ev = e.data; // { name, type, ... }
console.log(ev.name); // "Day to Night"
});isHappy / isSadで表情が変わります。さらにキャンバス上でマウスを動かすと視線がカーソルを追います(Listeners)。上のキャンバスのトグルで表情を変える / マウスを動かす
初期化中…
Motionで制御。トリガーFireと 数値MoveをUI化し、トリガーは数字キー1にも割り当てています。初期化中…
autoBindで束縛した View Model のプロパティを型ごとに自動でUI化。 文字列・数値・色・enumなどを編集すると、アニメ側へリアルタイムに反映されます。初期化中…
const vmi = rive.viewModelInstance;
vmi.properties.forEach(p => p.type); // 型を列挙
vmi.string("title").value = "Rive Lab";
vmi.color("accent").rgb(255, 93, 59);danceで踊り出し、トリガーlook upで見上げます。検出した入力からUIを自動生成しています。初期化中…
const inputs = rive.stateMachineInputs("birb");
inputs.find(i => i.name === "dance").value = true;
inputs.find(i => i.name === "look up").fire();15個の .riv を切り替えて自由に操作。ファイルの中身(アートボード/ステートマシン/入力)を 自動でインスペクトし、操作UIを生成します。
キャンバスを直接ホバー / クリックすると、Listeners を持つファイルは反応します
初期化中…