タイミングとイージング
モーションが現実世界に基づいている場合、私たちは速度とパフォーマンスへの期待を伴うデジタル メディアでもあります。
例
WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。
アニメーションの継続時間の標準値
WinUI には、プラットフォーム コントロール全体で使用される一連の標準的なアニメーションの継続時間が用意されています。 これらの名前付きリソースは、カスタム ストーリーボード アニメーションを構築するときにも使用できます。
| ThemeResource の名前 | Value |
|---|---|
| ControlNormalAnimationDuration | 250 ミリ秒 |
| ControlFastAnimationDuration | 167 ms |
| ControlFasterAnimationDuration | 83 ミリ秒 |
Fluent モーションでのイージング
イージングは、オブジェクトの移動速度を操作する方法です。 Fluent モーションのすべてのエクスペリエンスを結び付ける接着剤です。極端ですが、システムで使用されるイージングは、システム内で移動するオブジェクトの物理的な操作感を統合することができます。 これは、現実世界を模倣し、動いているオブジェクトを自分の環境に属しているように感じさせる方法の 1 つです。
モーションにイージングを適用する
これらのイージングは、より自然な感覚を実現するのに役立ち、Fluent モーションに使用するベースラインです。
高速アウト、低速イン
cubic-bezier(0, 0, 0, 1)
移動または生成によりシーンに入るオブジェクトまたは UI に使用します。
シーン上でオブジェクトに極端な摩擦が生じ、オブジェクトの速度が低下します。結果として、遠くから移動してきたオブジェクトが極端な速度で入ってきたか、またはすぐに休止状態に戻ったという感覚を与えます。
直前に無反応の瞬間があったとしても、入ってきたオブジェクトの速度は、高速でレスポンシブに感じる効果があります。
低速アウト、高速イン
cubic-bezier(1 , 0 , 1 , 1)
シーンから出る UI またはオブジェクトに使用します。
オブジェクトは加速し、エスケープ速度に達するまで勢いを増します。結果として得られるのは、オブジェクトがユーザーの枠から懸命に抜け出し、新しいコンテンツの到来に備えているような感覚です。
関連記事
Windows developer