Teilen über

AnimatedIcon

  • Artikel

Ein AnimatedIcon-Steuerelement gibt animierte Bilder als Reaktion auf Benutzerinteraktionen und visuelle Zustandsänderungen wieder.

Animierte Symbole können die Aufmerksamkeit auf eine UI-Komponente lenken, z. B. die nächste Schaltfläche in einem Lernprogramm, oder einfach die dem Symbol zugeordnete Aktion auf unterhaltsame und interessante Weise wiedergeben.

Benutzerdefinierte Animationen können mit Adobe AfterEffects erstellt und mit der Lottie-Windows-Bibliothek gerendert werden, um sie als animiertes Symbol in Ihrer WinUI-Anwendung zu verwenden. Weitere Details finden Sie unter Verwenden von Lottie zum Erstellen animierter Inhalte für ein AnimatedIcon weiter unten in diesem Artikel.

Das folgende Beispiel zeigt ein einfaches animiertes Suchsymbol, das in Adobe AfterEffects erstellt und über Lottie gerendert wurde.

Ein animiertes Suchsymbol

Ist dies das richtige Steuerelement?

Verwenden Sie das AnimatedIcon-Steuerelement, wenn das Symbol eines Steuerelements als Reaktion auf die Benutzerinteraktion mit dem Steuerelement animiert werden muss, z. B. wenn ein Benutzer den Mauszeiger über eine Schaltfläche bewegt oder darauf klickt.

Verwenden Sie kein AnimatedIcon, wenn die Animation nicht durch einen visuellen Zustandsübergang ausgelöst wird und in einer Schleife oder nur einmal abgespielt wird oder angehalten werden kann. Verwenden Sie stattdessen AnimatedVisualPlayer.

Verwenden Sie AnimatedIcon nur für Symbole oder wenn das Steuerelement keine IconElement- oder IconElementSource-Eigenschaft unterstützt. Verwenden Sie stattdessen AnimatedVisualPlayer.

Wenn kein animiertes Symbol erforderlich ist, verwenden Sie stattdessen FontIcon, SymbolIcon oder BitmapIcon.

Unterschiede zwischen AnimatedIcon und AnimatedVisualPlayer

AnimatedIcon ist ein IconElement, das überall verwendet werden kann, wo ein Element oder IconElement erforderlich ist (z. B. NavigationViewItem.Icon), und das über eine State-Eigenschaft gesteuert wird.

AnimatedVisualPlayer ist ein allgemeinerer Animationsplayer, der über Methoden wie Play und Pause gesteuert wird und überall in einer Anwendung verwendet werden kann.

Verwenden von Lottie zum Erstellen animierter Inhalte für ein AnimatedIcon

Das Definieren einer Animation für ein AnimatedIcon beginnt mit dem Prozess zum Definieren einer Animation für einen AnimatedVisualPlayer. Sie müssen die Lottie-Datei für das Symbol, das Sie hinzufügen möchten, erstellen oder abrufen und diese Datei durch LottieGen hinzufügen oder ausführen. LottieGen generiert Code für eine C++/WinRT-Klasse, den Sie dann instanziieren und mit einem AnimatedIcon-Steuerelement verwenden können.

Hinweis

Das AutoSuggestBox-Steuerelement verwendet die AnimatedVisuals.AnimatedFindVisualSource-Klasse, die mit dem LottieGen-Tool generiert wurde.

Sie können in der Animationsdefinition auch Markierungen definieren, um Wiedergabezeitpositionen anzuzeigen. Anschließend können Sie den AnimatedIcon-Zustand auf diese Markierungen festlegen. Wenn Sie beispielsweise in der Lottie-Datei eine Wiedergabeposition mit der Markierung „PointerOver“ haben, können Sie den AnimatedIcon-Status auf „PointerOver“ setzen und die Animation an diese Wiedergabeposition verschieben.

Wenn Sie in Ihrer Lottie-Animation eine Farbeigenschaft mit dem Namen „Vordergrund“ definieren, können Sie die Farbe mit der Eigenschaft AnimatedIcon.Foreground festlegen.

Empfehlungen

  • Sehen Sie sich die UX-Anleitung für Symbole für Windows-Apps an, um sicherzustellen, dass Ihre Symbole den Designprinzipien entsprechen.
  • Begrenzen Sie die Anzahl animierter Symbole auf einem einzelnen Bildschirm oder in einer einzelnen Ansicht. Animieren Sie Symbole nur, um die Aufmerksamkeit des Benutzers dorthin zu lenken, wo er etwas unternehmen muss oder wann er eine Aktion ausführt.

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.

Das AnimatedIcon für UWP-Apps erfordert WinUI 2. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter WinUI 2. APIs für dieses Steuerelement sind im Microsoft.UI.Xaml.Controls-Namespace vorhanden.

Zur Verwendung des Codes in diesem Artikel mit WinUI 2 stellen Sie die in Ihrem Projekt enthaltenen Windows-UI-Bibliothek-APIs mithilfe eines Alias in XAML dar (wir verwenden muxc). Weitere Informationen finden Sie unter Erste Schritte mit WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:AnimatedIcon />

Erstellen eines animierten Symbols

Öffnen Sie die WinUI 3 Gallery App und sehen Sie das AnimatedIcon 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

Hinzufügen eines AnimatedIcon zu einer Schaltfläche

Das folgende Beispiel zeigt eine Zurück-Schaltfläche, die ein animiertes Zurück-Symbol auf einem PointerEntered-Ereignis anzeigt.

  • Die AnimatedBackVisualSource ist eine Klasse, die mit dem LottieGen-Befehlszeilentool erstellt wurde.
  • Die FallbackIconSource wird verwendet, wenn Animationen nicht abgespielt werden können, beispielsweise bei älteren Windows-Versionen, die Lottie-Animationen nicht unterstützen.
  • Wenn der Benutzer Animationen in seinen Systemeinstellungen deaktiviert, zeigt AnimatedIcon das letzte Frame des Zustandsübergangs an, in dem sich die Steuerelemente befanden.
<Button PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <AnimatedIcon x:Name='BackAnimatedIcon'>
        <AnimatedIcon.Source>
            <animatedvisuals:AnimatedBackVisualSource/>
        </AnimatedIcon.Source>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Back'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "Normal");
}

Hinzufügen eines AnimatedIcon zu NavigationViewItem

Das NavigationViewItem-Steuerelement legt automatisch allgemeine Zustände auf einem AnimatedIcon basierend auf dem Zustand des Steuerelements fest, wenn diese Markierungen in der Lottie-Animation definiert sind.

Das folgende Beispiel zeigt beispielsweise, wie eine benutzerdefinierte Animation (GameSettingsIcon) festgelegt wird, die vom LottieGen-Tool generiert wurde:

<NavigationView.MenuItems>
    <NavigationViewItem Content = "Game Settings">
        <NavigationViewItem.Icon>
            <AnimatedIcon x:Name='GameSettingsIcon'>
                <AnimatedIcon.Source>
                    <animatedvisuals:AnimatedSettingsVisualSource/>
                </AnimatedIcon.Source>
                <AnimatedIcon.FallbackIconSource>
                    <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;"/>
                </AnimatedIcon.FallbackIconSource>
            </AnimatedIcon>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

Animiertes Zahnradsymbol für Einstellungen

Das NavigationViewItem legt automatisch die folgenden Zustände im AnimatedIcon fest:

  • Normal
  • PointerOver
  • Gedrückt
  • Aktiviert
  • PressedSelected
  • PointerOverSelected

Wenn für GameSettingsIcon ein Marker für „NormalToPointerOver“ definiert ist, wird das Symbol animiert, bis der Zeiger über das NavigationViewItem bewegt wird. Weitere Informationen zum Erstellen von Markern finden Sie im folgenden Abschnitt.

Definieren von AnimatedIcon-Markern

Um das benutzerdefinierte GameSettingsIcon im vorherigen Beispiel zu erstellen, führen Sie eine Lottie JSON-Datei (mit Markern) über das Windows LottieGen-Tool aus, um den Animationscode als eine C#-Klasse zu generieren.

Nachdem Sie die Lottie-Datei über LottieGen ausgeführt haben, können Sie Ihrem Projekt die CodeGen-Ausgabeklasse hinzufügen. Weitere Informationen finden Sie im LottieGen-Tutorial.

Wenn Sie den AnimatedIcon-Status auf einen neuen Wert setzen, wird in der Lottie-Animation auch eine Wiedergabeposition für den Übergang vom alten zum neuen Status festgelegt. Diese Wiedergabepositionen werden auch mit Markern in der Lottie-Datei identifiziert. Bestimmte Marker für den Beginn des Übergangs oder das Ende des Übergangs können ebenfalls definiert werden.

Beispielsweise verwendet das AutoSuggestBox-Steuerelement ein AnimatedIcon, das mit den folgenden Zuständen animiert wird:

  • Normal
  • PointerOver
  • Gedrückt

Sie können Marker in Ihrer Lottie-Datei mit diesen Statusnamen definieren. Sie können Marker auch wie folgt definieren:

  • Fügen Sie „An“ zwischen Statusnamen ein. Wenn Sie beispielsweise einen Marker vom Typ „NormalToPointerOver“ definieren, bewirkt eine Änderung des AnimatedIcon-Status von „Normal“ in „PointerOver“, dass er an die Wiedergabeposition dieses Markers verschoben wird.
  • Fügen Sie „_Start“ oder „_End“ an einen Markernamen an. Wenn Sie beispielsweise die Marker „NormalToPointerOver_Start“ und „NormalToPointerOver_End“ definieren und den AnimatedIcon-Status von „Normal“ in „PointerOver“ ändern, wird zur Wiedergabeposition des Markers „_Start“ gesprungen und anschließend eine Animation zur Wiedergabeposition „_End“ abgespielt.

Der genaue Algorithmus, der zum Zuordnen von AnimatedIcon-Statusänderungen zu Marker-Wiedergabepositionen verwendet wird:

  • Überprüfen Sie die Marker der bereitgestellten Datei auf die Marker „[PreviousState]To[NewState]_Start“ und „[PreviousState]To[NewState]_End“. Wenn beide gefunden werden, spielen Sie die Animation von „[PreviousState]To[NewState]_Start“ bis „[PreviousState]To[NewState]_End“ ab.
  • Wenn „[PreviousState]To[NewState]_Start“ nicht gefunden wird, aber „[PreviousState]To[NewState]_End“ gefunden wird, dann erfolgt ein harter Schnitt zur Wiedergabeposition „[PreviousState]To[NewState]_End“.
  • Wenn „[PreviousState]To[NewState]_End“ nicht gefunden wird, aber „[PreviousState]To[NewState]_Start“ gefunden wird, dann erfolgt ein harter Schnitt zur Wiedergabeposition „[PreviousState]To[NewState]_Start“.
  • Überprüfen Sie, ob die bereitgestellten Marker von IAnimatedVisualSource2 für die Marker „[PreviousState]To[NewState]“ vorhanden sind. Wenn er gefunden wird, dann führen Sie einen harten Schnitt zur Wiedergabeposition „[PreviousState]To[NewState]“ aus.
  • Überprüfen Sie, ob die bereitgestellten Marker von IAnimatedVisualSource2 für die Marker „[NewState]“ vorhanden sind. Wenn er gefunden wird, dann führen Sie einen harten Schnitt zur Wiedergabeposition „[NewState]“ aus.
  • Überprüfen Sie, ob die bereitgestellten Marker von IAnimatedVisualSource2 Marker enthalten, die mit „To[NewState]_End“ enden. Wenn ein Marker mit dieser Endung gefunden wird, wird ein harter Schnitt zum ersten gefundenen Marker mit der Wiedergabeposition der entsprechenden Endung durchgeführt.
  • Überprüfen Sie, ob „[NewState]“ einen Float-Wert analysiert. Wenn dies der Fall ist, wird eine Animation von der aktuellen Position zum analysierten Float durchgeführt.
  • Harter Schnitt zur Wiedergabeposition 0,0.

Das folgende Beispiel zeigt das Markerformat in einer Lottie-JSON-Datei. Weitere Details finden Sie in den AnimatedIcon-Anleitungen.

"markers":[{"tm":0,"cm":"NormalToPointerOver_Start","dr":0},{"tm":9,"cm":"NormalToPointerOver_End","dr":0},

{"tm":10,"cm":"NormalToPressed_Start","dr":0},{"tm":19,"cm":"NormalToPressed_End","dr":0},

{"tm":20,"cm":"PointerOverToNormal_Start","dr":0},{"tm":29,"cm":"PointerOverToNormal_End","dr":0},

{"tm":30,"cm":"PointerOverToPressed_Start","dr":0},{"tm":39,"cm":"PointerOverToPressed_End","dr":0},

{"tm":40,"cm":"PressedToNormal_Start","dr":0},{"tm":49,"cm":"PressedToNormal_End","dr":0},

{"tm":50,"cm":"PressedToPointerOver_Start","dr":0},{"tm":69,"cm":"PressedToPointerOver_End","dr":0},

{"tm":90,"cm":"PressedToNormal_Start","dr":0},{"tm":99,"cm":"PressedToNormal_End","dr":0},

{"tm":100,"cm":"PressedToPointerOver_Start","dr":0},{"tm":101,"cm":"PressedToPointerOver_End","dr":0}]

Hinzufügen eines eigenständigen AnimatedIcon

Das folgende Beispiel ist eine Schaltfläche, auf die der Benutzer klickt, um eine Eingabeaufforderung zu akzeptieren.

Die MyAcceptAnimation-Klasse wird mit dem LottieGen-Tool erstellt.

Die FallbackIconSource wird anstelle der Animation verwendet, wenn Animationen nicht abgespielt werden können, beispielsweise bei älteren Windows-Versionen, die Lottie-Animationen nicht unterstützen.

Wenn der Benutzer Animationen in seinen Systemeinstellungen deaktiviert, zeigt AnimatedIcon das letzte Frame des Zustandsübergangs an, in dem sich die Steuerelemente befanden.

<Button PointerEntered="HandlePointerEntered" PointerExited="HandlePointerExited">
    <AnimatedIcon x:Name='AnimatedIcon1'>
        <local:MyAcceptAnimation/>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Accept'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.AnimatedIcon1, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.StackPaAnimatedIcon1nel1, "Normal");
}