まとめるBringing it together

タイミング、イージング、方向、および重力は、連携して Fluent モーションの基礎となります。Timing, easing, directionality, and gravity work together to form the foundation of Fluent motion. それぞれが、互いのコンテキストで考慮され、アプリのコンテキストで適切に適用される必要があります。Each has to be considered in the context of the others, and applied appropriately in the context of your app.

アプリに Fluent モーションの基礎を適用する 3 つの方法を次に示します。Here are 3 ways to apply Fluent motion fundamentals in your app.

Implicit animation

Automatic tween and timing between values in a parameter change to achieve very simple Fluent motion using the standardized values.

Built-in animation

System components, such as common controls and shared motion, are "Fluent by default". Fundamentals have been applied in a manner consistent with their implied usage.

Custom animation following guidance recommendations

There may be times when the system does not yet provide an exact motion solution for your scenario. In those cases, use the baseline fundamental recommendations as a starting point for your experiences.

移行の例Transition example

機能的なアニメーション

Direction Forward Out:
Fade out: 150m; Easing: Default Accelerate

Direction Forward In:
Slide up 150px: 300ms; Easing: Default Decelerate

Direction Backward Out:
Slide down 150px: 150ms; Easing: Default Accelerate

Direction Backward In:
Fade in: 300ms; Easing: Default Decelerate

オブジェクトの例Object example

300 ミリ秒のモーション

Direction Expand:
Grow: 300ms; Easing: Standard

Direction Contract:
Grow: 150ms; Easing: Default Accelerate

Examples

XAML controls gallery

ある場合、 XAML コントロール ギャラリーアプリをインストールするには、ここをクリックしてアプリを開き、操作の暗黙的な遷移を参照してくださいします。If you have the XAML Controls Gallery app installed, click here to open the app and see Implicit Transitions in action.

暗黙的なアニメーションImplicit Animations

暗黙的なアニメーションに必要な Windows 10、バージョンは 1809 (SDK 17763) またはそれ以降。Implicit animations require Windows 10, version 1809 (SDK 17763) or later.

暗黙的なアニメーションは、自動的にパラメーターの変更中に新旧の値の間を補間によって Fluent の動きを実現する簡単な方法です。Implicit animations are a simple way to achieve Fluent motion by automatically interpolating between the old and new values during a parameter change.

暗黙的に次のプロパティを変更をアニメーション化できます。You can implicitly animate changes to the following properties:

各プロパティをアニメーション化に暗黙的に変更を持つことができますが、対応する_遷移_プロパティ。Each property that can have changes implicitly animated has a corresponding transition property. プロパティをアニメーション化するが移行型を割り当て、対応する_遷移_プロパティ。To animate the property, you assign a transition type to the corresponding transition property. このテーブルを示しています、_遷移_プロパティとそれぞれに使用する移行型。This table shows the transition properties and the transition type to use for each one.

アニメーション化されたプロパティAnimated property 遷移プロパティTransition property 暗黙的な移行の種類Implicit transition type
UIElement.OpacityUIElement.Opacity OpacityTransitionOpacityTransition ScalarTransitionScalarTransition
UIElement.RotationUIElement.Rotation RotationTransitionRotationTransition ScalarTransitionScalarTransition
UIElement.ScaleUIElement.Scale ScaleTransitionScaleTransition Vector3TransitionVector3Transition
UIElement.TranslationUIElement.Translation TranslationTransitionTranslationTransition Vector3TransitionVector3Transition
Border.BackgroundBorder.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
ContentPresenter.BackgroundContentPresenter.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
Panel.BackgroundPanel.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition

この例では、ボタン コントロールが有効にすると、フェードインし、フェードアウトを無効にすることに、Opacity プロパティと遷移を使用する方法を示します。This example shows how to use the Opacity property and transition to make a button fade in when the control is enabled and fade out when it's disabled.

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