タイミングと緩和手法

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

例

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。

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

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

Fluent モーションにおけるイージング

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

フレームの右下隅から円が現れ、フレームの左上隅付近で停止する様子を示す短いビデオ。

モーションにイージングを適用する

これらのイージングは、より自然な感覚を実現するのに役立ち、Fluent モーションに使用するベースラインです。

高速アウト、低速イン

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

低速アウト、高速イン

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

関連記事

• モーションの概要
• Fluent Design - Motion
• 方向性と重力