まとめる

  • [アーティクル]

タイミング、イージング、方向、および重力は、連携して Fluent モーションの基礎となります。 それぞれが、互いのコンテキストで考慮され、アプリのコンテキストで適切に適用される必要があります。

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

暗黙的なアニメーション パラメーター変更時の値間の自動トゥイーンとタイミングにより、標準化された値を使用して非常にシンプルな Fluent モーションを実現します。

組み込みのアニメーション一般的なコントロールや共有モーションなどのシステム コンポーネントは、"既定で Fluent" です。 基礎は、暗黙的な使用法と一貫性のある方法で適用されています。

ガイダンス推奨事項に従うカスタム アニメーション お客様のシナリオに対して、システムにより正確なモーション ソリューションが提供されていない場合があります。 そのような場合は、エクスペリエンスの出発点としてベースラインの基本的な推奨事項を使用します。

切り替えの例

機能的なアニメーション

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

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

オブジェクトの例

300 ミリ秒のモーション

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

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

例

WinUI ギャラリー

WinUI 2 ギャラリー アプリがインストールされている場合は、ここをクリックしてアプリを開き、「暗黙的な遷移の動作」を参照してください。

暗黙的なアニメーション

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

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

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

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

アニメーション化プロパティ 遷移プロパティ 暗黙的な遷移の種類
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TranslationTransition Vector3Transition
Border.Background BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Panel.Background BackgroundTransition BrushTransition

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

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