Zusammenführen

  • Artikel

Timing, Easing, Directionality und Gravity arbeiten zusammen, um die Grundlage von Fluent-Bewegung zu bilden. Jede muss im Kontext der anderen berücksichtigt und entsprechend im Kontext Ihrer App angewendet werden.

Hier sind drei Möglichkeiten zum Anwenden von Fluent-Bewegungsgrundlagen in Ihrer App.

Implizite Animation Automatisches Tween und Timing zwischen Werten in einer Parameteränderung, um eine sehr einfache Fluent-Bewegung mit den standardisierten Werten zu erzielen.

Integrierte Animation Systemkomponenten, z. B. allgemeine Steuerelemente und freigegebene Bewegungen, sind standardmäßig "Fluent". Die Grundlagen wurden in einer Weise angewendet, die mit ihrer impliziten Verwendung übereinstimmt.

Benutzerdefinierte Animation nach Anleitungsempfehlungen Es kann vorkommen, dass das System noch keine genaue Bewegungslösung für Ihr Szenario bereitstellt. Verwenden Sie in diesen Fällen die grundlegenden Basisempfehlungen als Ausgangspunkt für Ihre Erfahrungen.

Übergangsbeispiel

Funktionale Animation

Richtung Vorwärts nach außen:
Ausblenden: 150m; Beschleunigung: Standardbeschleunigen der Richtung vorwärts in:
Schiebe nach oben 150px: 300ms; Beschleunigung: Standardverlangtbremsung

Richtung rückwärts nach außen:
Rutsche nach unten 150px: 150ms; Beschleunigung: Standardrichtung rückwärts beschleunigen:
Einblenden: 300 ms; Beschleunigung: Standardverlangtbremsung

Objektbeispiel

300 ms Bewegung

Richtung erweitern:
Wachsen: 300ms; Lockerung: Standard

Richtungsvertrag:
Wachsen: 150ms; Beschleunigung: Standardbeschleunigen

Beispiele

WinUI-Katalog

Wenn Sie die WinUI 2-Katalog-App installiert haben, klicken Sie hier, um die App zu öffnen und implizite Übergänge in Aktion zu sehen.

Implizite Animationen

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

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 interpolieren.

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

Jede Eigenschaft, die implizit animierte Änderungen aufweisen 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 jeweils verwendet werden soll.

Animierte Eigenschaft Transition-Eigenschaft Impliziter Übergangstyp
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation ÜbersetzungTransition Vector3Transition
Border.Background HintergrundTransition BrushTransition
ContentPresenter.Background HintergrundTransition BrushTransition
Panel.Background HintergrundTransition BrushTransition

In diesem Beispiel wird gezeigt, wie Sie die Deckkraft-Eigenschaft und den Übergang verwenden, um eine Schaltfläche einblenden zu lassen, wenn das Steuerelement aktiviert ist, und 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;
}