まとめる

タイミング、イージング、方向性、重力が連携して Fluent モーションの基盤を形成します。 それぞれが他のコンテキストで考慮され、アプリのコンテキストで適切に適用される必要があります。

アプリで Fluent モーションの基礎を適用する 3 つの方法を次に示します。

• 暗黙的なアニメーション
  標準化された値を使用して非常に単純な Fluent モーションを実現するために、パラメーター変更の値間の自動ツイーンとタイミング。
• 組み込みのアニメーション
  共通コントロールや共有モーションなどのシステム コンポーネントは、"既定では Fluent" です。 基礎は、暗黙的な使用法と一貫性のある方法で適用されています。
• ガイダンスの推奨事項に従ったカスタム アニメーション
  システムがシナリオに正確なモーション ソリューションをまだ提供していない場合があります。 そのような場合は、エクスペリエンスの出発点としてベースラインの基本的な推奨事項を使用します。

切り替えの例

オブジェクトの例

例

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

暗黙的なアニメーション

暗黙的なアニメーションは、パラメーターの変更時に新旧の値を自動的に補間することで Fluent の動きを実現する簡単な方法です。

次のプロパティに対する変更を暗黙的にアニメーション化できます。

• UIElement

  • 不透明度
  • 回転
  • スケール
  • 翻訳

• Border、ContentPresenter、またはPanel

  • 背景

暗黙的にアニメーション化された変更が可能な各プロパティには、対応する transition プロパティがあります。 プロパティをアニメーション化するには、対応する transition プロパティに遷移の種類を割り当てます。 次の表に、transition プロパティと、それぞれに使用する遷移の種類を示します。

この例では、不透明度プロパティと遷移を使用して、コントロールが有効になったときにボタンをフェードインし、無効になったときにフェードアウトする方法を示しています。

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}

UWP と WinUI 2

暗黙的なアニメーションには Windows 10 Version 1809 (SDK 17763) 以降が必要です。

関連記事

• モーションの概要
• タイミングとイージング
• 方向性と重力