本文へスキップ

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

スタイルの変化は transition でアニメーションします。ビューはフレームごとに再構築しません。

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

button()
    .bg(Color::rgb8(37, 99, 235))
    .transition(Transition::colors(Duration::from_millis(160)))
    .hover(|style| style.bg(Color::rgb8(29, 78, 216)))
    .child("Hover")

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

ビューの状態からスタイルのフィールドを変え、invalidate を呼び出します。アニメーション中は要素をマウントしたままにします。

#時間とフレームレート

Transition::new は Duration を受け取ります。イージングは with_easing で設定し、必要なら max_fps で頻度の上限を付けます。

#対応するプロパティ

背景、ボーダーの色と幅、半径、テキストの色、ボックスシャドウ、不透明度、transform は補間されます。幅、高さ、パディングは補間されません。

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

コンポーネントが対応しているときは、終了トランジションのあいだオーバーレイをマウントしたままにします。トランジションはシステムの Reduce Motion 設定に従います。

#アニメーション画像

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