Animationen in Windows app

Timing, Easing, Direktionalität und Schwerkraft bilden zusammen die Grundlage für Fluent-Bewegungen. 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
  Automatisches Tweening und Timing zwischen Werten bei einer Parameteränderung, um mithilfe der standardisierten Werte sehr einfache Fluent-Bewegungen zu erzielen.
• Integrierte Animation
  Systemkomponenten wie 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

Objektbeispiel

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.

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:

• UIElement

  • Undurchsichtigkeit
  • Drehung
  • Scale
  • Übersetzung

• Rahmen, ContentPresenter oder Panel

  • Hintergrund

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 transition-Eigenschaften und den Übergangstyp, der für jede Eigenschaft verwendet werden soll.

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

Verwandte Artikel

• Bewegungsübersicht
• Timing und Beschleunigung
• Direktionalität und Schwerkraft