Windows appのアニメーション

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

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

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

切り替えの例

機能アニメーション

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

後方への出方向:
スライド ダウン 150 px: 150 ms、イージング: 既定の加速 方向後方イン:
フェードイン: 300 ms、イージング: 既定の減速

オブジェクトの例

300 ミリ秒のモーション

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

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

暗黙的なアニメーション

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

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

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

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

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

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

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

<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;
}
  • Last updated on