タイミングとイージング

  • [アーティクル]

モーションが現実世界に基づいている場合、私たちは速度とパフォーマンスへの期待を伴うデジタル メディアでもあります。

例

WinUI ギャラリー

WinUI 2 ギャラリー アプリがインストールされている場合は、ここをクリックしてアプリを開き、「イージング関数の動作」を参照してください。

アニメーションの継続時間の標準値

WinUI には、プラットフォーム コントロール全体で使用される一連の標準的なアニメーションの継続時間が用意されています。 これらの名前付きリソースは、カスタム ストーリーボード アニメーションを構築するときにも使用できます。

ThemeResource の名前 値
ControlNormalAnimationDuration 250 ミリ秒
ControlFastAnimationDuration 167 ミリ秒
ControlFasterAnimationDuration 83 ミリ秒

Fluent モーションのイージング

イージングは、移動時のオブジェクトの速度を操作する方法です。 Fluent モーションのすべてのエクスペリエンスを結び付ける接着剤です。極端ですが、システムで使用されるイージングは、システム内で移動するオブジェクトの物理的な操作感を統合することができます。 これは、現実世界を模倣し、移動中のオブジェクトがその環境に属しているように感じさせる 1 つの方法です。

フレームの右下隅から円が表示され、フレームの左上隅付近で停止している短いビデオ。

モーションへのイージングの適用

これらのイージングは、より自然な操作感を得るのに役立ち、Fluent モーションのために使用するベースラインとなります。

高速アウト、低速イン

cubic-bezier(0, 0, 0, 1)

移動または生成によりシーンに入るオブジェクトまたは UI に使用します。

シーン上でオブジェクトに極端な摩擦が生じ、オブジェクトの速度が低下します。結果として、遠くから移動してきたオブジェクトが極端な速度で入ってきたか、またはすぐに休止状態に戻ったという感覚を与えます。

直前に無反応の瞬間があったとしても、入ってきたオブジェクトの速度は、高速でレスポンシブに感じる効果があります。

減速イージング

低速アウト、高速イン

cubic-bezier(1 , 0 , 1 , 1)

シーンから出る UI またはオブジェクトに使用します。

オブジェクトは加速し、エスケープ速度に達するまで勢いを増します。結果として得られるのは、オブジェクトがユーザーの枠から懸命に抜け出し、新しいコンテンツの到来に備えているような感覚です。

イージングを加速する