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 Tutorial, oder einfach die dem Symbol zugeordnete Aktion auf unterhaltsame und interessante Weise wiedergeben.

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

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 Benutzerinteraktionen mit dem Steuerelement animiert werden muss, z. B. wenn ein Benutzer über eine Schaltfläche bewegt oder darauf klickt.

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

Verwenden Sie AnimatedIcon nicht für andere Elemente als ein Symbol, 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 wird über eine State-Eigenschaft gesteuert.

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 AnimiertesIcon

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 erstellen oder abrufen, das Sie hinzufügen möchten, und diese Datei über LottieGen 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 auch Marker in der Animationsdefinition definieren, um die Wiedergabezeitpositionen anzugeben. Sie können dann den AnimatedIcon-Zustand auf diese Marker festlegen. Wenn Sie beispielsweise eine Wiedergabeposition in der Lottie-Datei mit der Bezeichnung "PointerOver" haben, können Sie den AnimatedIcon-Zustand auf "PointerOver" festlegen und die Animation an diese Wiedergabeposition verschieben.

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

Empfehlungen

  • Sehen Sie sich die UX-Anleitung für Symbole für Windows-Apps an, um sicherzustellen, dass Ihre Symbole den Entwurfsprinzipien entsprechen.
  • Beschränken Sie die Anzahl animierter Symbole auf einem einzelnen Bildschirm oder einer einzelnen Ansicht. Animieren Sie Nur Symbole, um die Aufmerksamkeit des Benutzers darauf zu lenken, wo er Maßnahmen ergreifen 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 die Windows-UI-Bibliothek 2. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek). 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-Katalog-App, und sehen Sie sich animiertesIcon in Aktion an.

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 animiertenIcons zu einer Schaltfläche

Das folgende Beispiel veranschaulicht eine Zurück-Schaltfläche, die ein animiertes Zurück-Symbol für ein PointerEntered-Ereignis anzeigt.

  • Ist AnimatedBackVisualSource eine Klasse, die mit dem Befehlszeilentool LottieGen erstellt wurde.
  • FallbackIconSource wird verwendet, wenn Animationen nicht wiedergegeben werden können, z. B. in älteren Versionen von Windows, die keine Lottie-Animationen unterstützen.
  • Wenn der Benutzer Animationen in seinen Systemeinstellungen deaktiviert, zeigt AnimatedIcon den letzten 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 AnimiertenIcons zu NavigationViewItem

Das NavigationViewItem-Steuerelement legt automatisch allgemeine Zustände für ein AnimiertesIcon basierend auf dem Zustand des Steuerelements fest, wenn diese Marker in der Lottie-Animation definiert sind.

Im folgenden Beispiel wird beispielsweise gezeigt, 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>

Ausrüstung für animierte Einstellungen

Das NavigationViewItem-Objekt legt automatisch die folgenden Zustände auf dem AnimatedIcon fest:

  • Normal
  • PointerOver
  • Gedrückt
  • Ausgewählt
  • PressedSelected
  • PointerOverSelected

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

Definieren von AnimatedIcon-Markern

Führen Sie zum Erstellen des benutzerdefinierten GameSettingsIcon im vorherigen Beispiel eine Lottie-JSON-Datei (mit Markern) über das Windows LottieGen-Tool aus, um den Animationscode als C#-Klasse zu generieren.

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

Durch Festlegen des AnimatedIcon-Zustands auf einen neuen Wert wird auch eine Wiedergabeposition in der Lottie-Animation für den Übergang vom alten Zustand zum neuen Zustand festgelegt. Diese Wiedergabepositionen werden auch mit Markern in der Lottie-Datei identifiziert. Es können auch spezifische Marker für den Beginn des Übergangs oder das Ende des Übergangs definiert werden.

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

  • 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 "To" zwischen Zustandsnamen ein. Wenn Sie z. B. einen Marker für "NormalToPointerOver" definieren, bewirkt das Ändern des Animationsicon-Zustands von "Normal" in "PointerOver", dass er zur Wiedergabeposition dieses Markers wechselt.
  • Fügen Sie "_Start" oder "_End" an einen Markernamen an. Wenn Sie beispielsweise die Marker "NormalToPointerOver_Start" und "NormalToPointerOver_End" definieren und den AnimatedIcon-Zustand von "Normal" in "ZeigerOver" ändern, springt er zur Wiedergabeposition des _Start Markers und animiert dann zur _End Wiedergabeposition.

Der genaue Algorithmus, der zum Zuordnen des AnimatedIcon-Zustands zu Markerwiedergabepositionen 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, geben Sie die Animation von "[PreviousState]To[NewState]_Start" bis "[PreviousState]To[NewState]_End" wieder.
  • Wenn "[PreviousState]To[NewState]_Start" nicht gefunden wird, aber "[PreviousState]To[NewState]_End" gefunden wird, wird die Wiedergabeposition "[PreviousState]To[NewState]_End" hart angeschnitten.
  • Wenn "[PreviousState]To[NewState]_End" nicht gefunden wird, aber "[PreviousState]To[NewState]_Start" gefunden wird, wird die Wiedergabeposition "[PreviousState]To[NewState]_Start" hart angeschnitten.
  • Überprüfen Sie, ob die von IAnimatedVisualSource2 bereitgestellten Marker für den Marker "[PreviousState]To[NewState]" angegeben sind. Wenn sie gefunden wird, wird die Wiedergabeposition "[PreviousState]To[NewState]" hart umgeschnitten.
  • Überprüfen Sie, ob die von IAnimatedVisualSource2 bereitgestellten Marker für den Marker "[NewState]" angegeben sind. Wenn sie gefunden wird, wird die Wiedergabeposition "[NewState]" hart umgeschnitten.
  • Überprüfen Sie, ob die bereitgestellten IAnimatedVisualSource2-Marker über einen Marker verfügen, der mit "To[NewState]_End" endet. Wenn ein Marker gefunden wird, der dieses Ende aufweist, wird der erste Marker mit der entsprechenden Wiedergabeposition der Endung hart abgeschnitten.
  • Überprüfen Sie, ob "[NewState]" mit einem Float analysiert wird. Wenn dies der Fall ist, animiert von der aktuellen Position zum analysierten Float.
  • Hart cut to playback position 0.0.

Das folgende Beispiel zeigt das Markerformat in einer Lottie-JSON-Datei. Weitere Informationen finden Sie in der Anleitung zu AnimatedIcon.

"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 animiertenIcons

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 wiedergegeben werden können, z. B. in älteren Versionen von Windows, die Lottie-Animationen nicht unterstützen.

Wenn der Endbenutzer Animationen in seinen Systemeinstellungen deaktiviert, zeigt AnimatedIcon den letzten 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");
}