Freigeben über

Zusammenführen

  • Artikel

Timing, Beschleunigung, Direktionalität und Schwerkraft arbeiten zusammen, um die Grundlage der Fluent-Bewegung zu bilden. Jede muss im Kontext der anderen berücksichtigt und entsprechend im Kontext Ihrer App angewendet werden.

Hier sind drei Methoden zum Anwenden von Fluent-Bewegungsgrundlagen in Ihrer App.

  • Implizite Animation
    Automatische Tween- und Anzeigedauer zwischen Werten in einem Parameter ändern sich, um sehr einfache Fluent-Bewegung mithilfe der standardisierten Werte zu erzielen.
  • Integrierte Animation
    Systemkomponenten, z. B. allgemeine Steuerelemente und freigegebene Bewegungen, sind "Fluent standardmäßig". Grundlagen wurden in Übereinstimmung mit ihrer impliziten Nutzung angewendet.
  • Empfehlungen für benutzerdefinierte Animationen
    Es kann vorkommen, dass das System noch keine genaue Bewegungslösung für Ihr Szenario bereitstellt. Verwenden Sie in diesen Fällen die grundlegenden Empfehlungen als Ausgangspunkt für Ihre Erfahrungen.

Beispiel für einen Übergang

Funktionale Animation

Richtung nach vorne:
Ausblenden: 150m; Beschleunigung: Standardbeschleunigendrichtung vorwärts in:
Folie nach oben 150px: 300 ms; Beschleunigung: Standardverzögerung

Richtung Nach hinten:
Ziehen Sie nach unten 150px: 150 ms; Beschleunigung: Standardbeschleunigendrichtung rückwärts in:
Einblenden: 300 ms; Beschleunigung: Standardverzögerung

Objektbeispiel

300 ms Bewegung

Richtung erweitern:
Wachsen: 300 ms; Beschleunigung: Standard

Richtungsvertrag:
Wachsen: 150 ms; Beschleunigung: Standardbeschleunigend

Beispiele

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie implizite Übergänge in Aktion.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Implizite Animationen

Implizite Animationen sind eine einfache Möglichkeit, fluent-Bewegung zu erzielen, indem sie während einer Parameteränderung automatisch zwischen den alten und neuen Werten interpoliert wird.

Sie können implizit Änderungen an den folgenden Eigenschaften animieren:

Jede Eigenschaft, die implizit animiert werden kann, verfügt über eine entsprechende Übergangseigenschaft . Um die Eigenschaft zu animieren, weisen Sie der entsprechenden Übergangseigenschaft einen Übergangstyp zu. In dieser Tabelle sind die Übergangseigenschaften und der Übergangstyp aufgeführt, der für die einzelnen Eigenschaften verwendet werden soll.

Animierte Eigenschaft Transition-Eigenschaft Impliziter Übergangstyp
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

In diesem Beispiel wird gezeigt, wie Sie die Opacity-Eigenschaft und den Übergang verwenden, um eine Schaltfläche einblenden zu lassen, wenn das Steuerelement aktiviert und ausgeblendet wird, wenn es deaktiviert ist.

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

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

Implizite Animationen erfordern Windows 10, Version 1809 (SDK 17763) oder höher.