ZusammenbringenBringing it together

Zeitliche Steuerung, Beschleunigung, Direktionalität und Schwerkraft bilden die Grundlage für den fließenden Bewegungs Aufwand.Timing, easing, directionality, and gravity work together to form the foundation of Fluent motion. Jede muss im Kontext der anderen berücksichtigt und entsprechend im Kontext ihrer App angewendet werden.Each has to be considered in the context of the others, and applied appropriately in the context of your app.

Im folgenden finden Sie drei Möglichkeiten, um die Grundlagen der Bewegung in Ihrer APP anzuwenden.Here are 3 ways to apply Fluent motion fundamentals in your app.

Implizite Animation Automatische Tween und zeitliche Steuerung zwischen Werten in einem Parameter ändern sich, um eine sehr einfache fließende Bewegung mithilfe der standardisierten Werte zu erzielen.Implicit animation Automatic tween and timing between values in a parameter change to achieve very simple Fluent motion using the standardized values.

Integrierte Animation System Komponenten, z. b. allgemeine Steuerelemente und freigegebene Bewegung, sind standardmäßig "fließend".Built-in animation System components, such as common controls and shared motion, are "Fluent by default". Grundlagen wurden auf eine Weise angewendet, die mit ihrer impliziten Verwendung konsistent ist.Fundamentals have been applied in a manner consistent with their implied usage.

Benutzerdefinierte Animation nach Anleitungen Es kann vorkommen, dass das System noch keine exakte Bewegungs Lösung für Ihr Szenario bereitstellt.Custom animation following guidance recommendations There may be times when the system does not yet provide an exact motion solution for your scenario. Verwenden Sie in diesen Fällen die grundlegenden Empfehlungen als Ausgangspunkt für Ihre Erfahrungen.In those cases, use the baseline fundamental recommendations as a starting point for your experiences.

Übergangs BeispielTransition example

funktionale Animation

Vorwärtsrichtung:Direction Forward Out:
Ausblenden: 150 min. Beschleunigung: Standard beschleunigt Vorwärtsrichtung in:Fade out: 150m; Easing: Default Accelerate Direction Forward In:
Nach oben 150px: 300 ms Beschleunigung: Standard VerlangsamungSlide up 150px: 300ms; Easing: Default Decelerate

Richtung rückwärts ausgehend:Direction Backward Out:
Nach unten 150px: 150 ms Beschleunigung: Standard beschleunigt die Richtung rückwärts in:Slide down 150px: 150ms; Easing: Default Accelerate Direction Backward In:
Ausblenden in: 300 ms; Beschleunigung: Standard VerlangsamungFade in: 300ms; Easing: Default Decelerate

Objekt BeispielObject example

300 ms Bewegung

Richtung erweitern:Direction Expand:
Vergrößern: 300 ms; Beschleunigung: StandardGrow: 300ms; Easing: Standard

Richtung Vertrag:Direction Contract:
Vergrößern: 150 ms; Beschleunigung: Standard BeschleunigungGrow: 150ms; Easing: Default Accelerate

BeispieleExamples

XAML controls gallery

Wenn Sie die Katalog-App für XAML -Steuerelemente installiert haben, klicken Sie hier, um die APP zu öffnen und die impliziten Übergänge in Aktion anzuzeigen.If you have the XAML Controls Gallery app installed, click here to open the app and see Implicit Transitions in action.

Implizite AnimationenImplicit Animations

Implizite Animationen erfordern Windows 10, Version 1809 (SDK 17763) oder höher.Implicit animations require Windows 10, version 1809 (SDK 17763) or later.

Implizite Animationen sind eine einfache Möglichkeit, um eine fließende Bewegung zu erreichen, indem Sie während einer Parameter Änderung automatisch zwischen den alten und neuen Werten interpolieren.Implicit animations are a simple way to achieve Fluent motion by automatically interpolating between the old and new values during a parameter change.

Sie können Änderungen an den folgenden Eigenschaften implizit animieren:You can implicitly animate changes to the following properties:

Jede Eigenschaft, für die Änderungen implizit animiert werden können, verfügt über eine entsprechende Übergangs Eigenschaft.Each property that can have changes implicitly animated has a corresponding transition property. Um die Eigenschaft zu animieren, weisen Sie der entsprechenden Übergangs Eigenschaft einen Übergangstyp zu.To animate the property, you assign a transition type to the corresponding transition property. In dieser Tabelle werden die Übergangs Eigenschaften und der zu verwendende Übergangstyp angezeigt.This table shows the transition properties and the transition type to use for each one.

Animierte EigenschaftAnimated property Übergangs EigenschaftTransition property Typ des impliziten ÜbergangsImplicit 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. HintergrundPanel.Background BackgroundtransitionBackgroundTransition BrushTransitionBrushTransition

In diesem Beispiel wird gezeigt, wie Sie mithilfe der Opacity-Eigenschaft und des Übergangs eine Schaltfläche ausblenden können, wenn das Steuerelement aktiviert und ausgeblendet wird, wenn es deaktiviert ist.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;
}