Freigeben über

Animationen in Windows app

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 Interpolation und zeitliche Abstimmung zwischen Werten während einer Parameteränderung, um eine sehr einfache und fließende Bewegung mithilfe standardisierter Werte zu erzielen.
  • Integrierte Animation
    Systemkomponenten, z. B. allgemeine Steuerelemente und freigegebene Bewegungen, sind standardmäßig „Fluent“. Grundlagen wurden in Übereinstimmung mit ihrer impliziten Nutzung angewendet.
  • Angepasste Animation entsprechend der Leitfadenempfehlungen
    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 vorwärts nach außen:
Ausblenden: 150 m; Beschleunigung: Standardbeschleunigen Richtung vorwärts nach innen:
Verschiebung um 150px nach oben: 300ms; Easing: Standard-Verzögerung

Richtung rückwärts nach außen:
Nach unten streichen 150 px: 150 ms; Beschleunigung: Standardbeschleunigen Richtung rückwärts nach innen:
Einblenden: 300 ms; Beschleunigung: Standardverzögerung

Objektbeispiel

300 ms Bewegung

Richtung erweitern:
Wachsen: 300 ms; Beschleunigung: Standard

Richtungsvertrag:
Wachsen: 150 ms; Beschleunigung: Standardbeschleunigend

Implizite Animationen

Implizite Animationen sind eine einfache Möglichkeit, eine Flüssige Bewegung zu erzielen, indem sie während einer Parameteränderung automatisch zwischen den alten und neuen Werten interpolieren.

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

WinUI 3-Katalogsymbol Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.

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. Diese Tabelle zeigt die Eigenschaften des Übergangs und den Übergangstyp, der für jede einzelne Eigenschaft verwendet werden soll.

Animierte Eigenschaft Transition-Eigenschaft Impliziter Übergangstyp
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation Rotationsübergang ScalarTransition
UIElement.Scale Skalierungsübergang Vector3Übergang
UIElement.Translation TranslationTransition Vector3Übergang
Border.Background HintergrundÜbergang Pinsel-Übergang
ContentPresenter.Hintergrund HintergrundÜbergang Pinsel-Übergang
Panel.Hintergrund HintergrundÜbergang Pinsel-Übergang

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;
}
  • Last updated on