トランジションとアニメーション

ベーススタイルの transition でスタイル変更をアニメーションします。コンポーネントはフレームごとに再実行されません。

#ホバーのトランジション

<Button style={{
  bg: "#2563eb",
  transition: { property: "bg", duration: 160 },
  hover: { bg: "#1d4ed8" },
}}>Hover</Button>

#状態によるアニメーション

状態からスタイルを変え、ノードはマウントしたままにします。フレームごとにコンポーネントを作り直してはいけません。

<View style={{
  bg: selected() ? "#2563eb" : "#334155",
  opacity: selected() ? 1 : 0.6,
  transition: { property: ["bg", "opacity"], duration: 180 },
}} />

#時間とフレームレート

時間にはミリ秒、または "180ms" のような文字列を指定できます。上限を付けたいときはイージングと maxFps を設定します。maxFps を省略するとディスプレイに追従します。

#対応するプロパティ

色、ボーダー、半径、不透明度、シャドウ、transform は補間されます。幅、高さ、パディングは補間されません。

#マウントと視差効果の抑制

コンポーネントが対応している場合は、終了トランジションのあいだオーバーレイをマウントしたままにします。Show は子をすぐに取り除きます。トランジションはシステムの「視差効果を減らす」設定に従います。上書きするにはウィンドウの reduceMotion を設定します。

#アニメーション画像

Image は渡したパスの GIF と WebP ファイルを再生します。タイマーは不要です。

<Image value={path} style={{ width: 96, height: 96, objectFit: "contain" }} />