Windows appのアニメーション

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

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

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

切り替えの例

方向前方アウト:
フェードアウト: 150 m、イージング: 既定の加速 方向前方イン:
スライド アップ 150 px: 300 ms、イージング: 既定の減速

後方への出方向:
スライドダウン150ピクセル: 150ms、イージング: デフォルトの加速方向: 後方イン
フェードイン: 300 ms、イージング: 既定の減速

オブジェクトの例

方向の拡張:
拡大: 300 ms、イージング: 標準

方向の契約:
拡張: 150 ms、イージング: 既定の加速

暗黙的なアニメーション

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

• 重要な API:Windows.UI.Xaml.Media.Animation 名前空間、 Windows.UI.Xaml.Controls 名前空間

WinUI 3 ギャラリー アプリを開き、暗黙的な遷移の動作を確認する

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

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

• UIElement (英語)

  • 不透明度
  • 回転
  • Scale
  • 翻訳

• Border、ContentPresenter、またはPanel

  • 経歴

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

アニメーション化されたプロパティ	遷移プロパティ	暗黙的な遷移の種類
UIElement.Opacity	不透明度トランジション	ScalarTransition の
UIElement.Rotation	回転トランジション	ScalarTransition の
UIElement.Scale	スケールトランジション	ベクトル3トランジション
UIElement.Translation	トランスレーショントランジション	ベクトル3トランジション
Border.Background	背景遷移	ブラシトランジション
コンテンツプレゼンターバックグラウンド	背景遷移	ブラシトランジション
パネルの背景	背景遷移	ブラシトランジション

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

<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;
}

関連資料

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