Delen via

GeanimeerdIcoon

Een AnimatedIcon-besturingselement speelt geanimeerde afbeeldingen af als reactie op interactie van de gebruiker en wijzigingen in de visuele status.

Pictogrammen met animatie kunnen de aandacht vestigen op een UI-onderdeel, zoals de volgende knop in een zelfstudie, of de actie weergeven die is gekoppeld aan het pictogram op een leuke en interessante manier.

Aangepaste animaties kunnen worden gemaakt met Adobe AfterEffects en worden weergegeven met de Lottie-Windows-bibliotheek om te gebruiken als een animatiepictogram in uw WinUI-toepassing. Zie Lottie gebruiken om geanimeerde inhoud te maken voor een AnimatedIcon verderop in dit artikel voor meer informatie.

In het volgende voorbeeld ziet u een eenvoudig zoekpictogram met animatie dat is gemaakt in Adobe AfterEffects en wordt weergegeven via Lottie.

Een pictogram voor zoeken met animatie

Is dit de juiste controle?

Gebruik het besturingselement AnimatedIcon wanneer het pictogram van een besturingselement moet animeren als reactie op de interactie van de gebruiker met het besturingselement, bijvoorbeeld wanneer een gebruiker de muisaanwijzer boven een knop beweegt of erop klikt.

Gebruik geen AnimatedIcon als de animatie niet wordt geactiveerd door een visuele statusovergang en wordt afgespeeld in een lus, slechts één keer wordt afgespeeld of kan worden onderbroken. Gebruik in plaats daarvan AnimatedVisualPlayer.

Gebruik AnimatedIcon niet voor iets anders dan een pictogram of waar het besturingselement geen eigenschap IconElement of IconElementSource ondersteunt. Gebruik in plaats daarvan AnimatedVisualPlayer.

Als een animatiepictogram niet vereist is, gebruikt u in plaats daarvan FontIcon, SymbolIcon of BitmapIcon .

Verschillen tussen AnimatedIcon en AnimatedVisualPlayer

AnimatedIcon is een IconElement, dat overal kan worden gebruikt waar een element of IconElement is vereist (zoals NavigationViewItem.Icon) en wordt beheerd via een eigenschap State.

AnimatedVisualPlayer is een meer algemene animatiespeler, die wordt beheerd via methoden zoals Afspelen en Onderbreken, en kan overal in een toepassing worden gebruikt.

Lottie gebruiken om geanimeerde inhoud te maken voor een AnimatedIcon

Het definiëren van een animatie voor een AnimatedIcon begint hetzelfde als het proces voor het definiëren van een animatie voor een AnimatedVisualPlayer. U moet het Lottie-bestand maken of verkrijgen voor het pictogram dat u wilt toevoegen en uitvoeren via LottieGen. LottieGen genereert code voor een C++/WinRT-klasse die u vervolgens kunt instantiëren en gebruiken met een AnimatedIcon.

Opmerking

Het besturingselement AutoSuggestBox maakt gebruik van de klasse AnimatedVisuals.AnimatedFindVisualSource , die is gegenereerd met het hulpprogramma LottieGen.

U kunt ook markeringen definiëren in de animatiedefinitie om afspeeltijdposities aan te geven. Vervolgens kunt u de status AnimatedIcon instellen op deze markeringen. Als u bijvoorbeeld een afspeelpositie hebt in het Lottie-bestand met de markering 'PointerOver', kunt u de status AnimatedIcon instellen op 'PointerOver' en de animatie naar die afspeelpositie verplaatsen.

Als u een kleureigenschap definieert in uw Lottie-animatie met de naam 'Voorgrond', kunt u de kleur instellen met behulp van de eigenschap AnimatedIcon.Foreground.

Aanbevelingen

  • Bekijk de UX-richtlijnen voor Pictogrammen voor Windows-apps om ervoor te zorgen dat uw pictogrammen overeenkomen met de ontwerpprincipes.
  • Beperk het aantal pictogrammen met animatie op één scherm of weergave. Alleen pictogrammen van animatie voorzien om de aandacht van de gebruiker te vestigen op de plaats waar ze actie moeten ondernemen of wanneer ze een actie uitvoeren.

Een animatiepictogram maken

Open de App WinUI 3 Gallery om AnimatedIcon in actie te zien

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Een AnimatedIcon toevoegen aan een knop

In het volgende voorbeeld ziet u een terugknop die een geanimeerd terugpictogram weergeeft op een PointerEntered-gebeurtenis.

  • Dit AnimatedBackVisualSource is een klasse die is gemaakt met het opdrachtregelprogramma LottieGen .
  • De FallbackIconSource wordt gebruikt wanneer animaties niet kunnen worden afgespeeld, zoals in oudere versies van Windows die Lottie-animaties niet ondersteunen.
  • Als de gebruiker animaties uitschakelt in de systeeminstellingen, geeft AnimatedIcon het laatste frame weer van de statusovergang waarin de besturingselementen zich bevinden.
<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");
}

Een AnimatedIcon toevoegen aan NavigationViewItem

Het besturingselement NavigationViewItem stelt automatisch algemene statussen in op een AnimatedIcon op basis van de status van het besturingselement, als deze markeringen zijn gedefinieerd in de Lottie-animatie.

In het volgende voorbeeld ziet u bijvoorbeeld hoe u een aangepaste animatie (GameSettingsIcon) instelt die is gegenereerd door het hulpprogramma LottieGen:

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

Geanimeerd instellingenwiel

De NavigationViewItem stelt automatisch de volgende statussen in op de AnimatedIcon:

  • Normaal
  • AanwijzerBoven
  • Ingedrukt
  • Uitverkoren
  • IngedruktGeselecteerd
  • AanwijzerBovenGeselecteerd

Als GameSettingsIcon een markering heeft gedefinieerd voor NormalToPointerOver, wordt het pictogram geanimeerd totdat de aanwijzer over de NavigationViewItem wordt verplaatst. Zie de volgende sectie voor meer informatie over het maken van markeringen.

AnimatedIcon-markeringen definiëren

Als u de aangepaste GameSettingsIcon in het vorige voorbeeld wilt maken, voert u een Lottie JSON-bestand (met markeringen) uit via het hulpprogramma Windows LottieGen om de animatiecode als een C#-klasse te genereren.

Zodra u uw Lottie-bestand via LottieGen hebt uitgevoerd, kunt u de CodeGen-uitvoerklasse toevoegen aan uw project. Zie de LottieGen-zelfstudie voor meer informatie.

Als u de status AnimatedIcon instelt op een nieuwe waarde, wordt ook een afspeelpositie in de Lottie-animatie ingesteld voor de overgang van de oude staat naar de nieuwe staat. Deze afspeelposities worden ook geïdentificeerd met markeringen in het Lottie-bestand. Specifieke markeringen voor het begin van de overgang of het einde van de overgang kunnen ook worden gedefinieerd.

Het besturingselement AutoSuggestBox maakt bijvoorbeeld gebruik van een AnimatedIcon die animatie geeft aan de volgende statussen:

  • Normaal
  • AanwijzerBoven
  • Ingedrukt

U kunt markeringen in uw Lottie-bestand definiëren met deze statusnamen. U kunt ook markeringen als volgt definiëren:

  • Voeg 'Aan' in tussen statenamen. Als u bijvoorbeeld een 'NormalToPointerOver'-markering definieert, zorgt het wijzigen van de status AnimatedIcon van 'Normal' in 'PointerOver' ervoor dat deze wordt verplaatst naar de afspeelpositie van deze markering.
  • Voeg '_Start' of '_End' toe aan een markeringsnaam. Als u bijvoorbeeld de markeerpunten 'NormalToPointerOver_Start' en 'NormalToPointerOver_End' definieert en de AnimatedIcon-status wijzigt van 'Normal' naar 'PointerOver', zal deze direct springen naar de afspeelpositie van het _Start-markeerpunt en vervolgens animeren naar de afspeelpositie van het _End-markeerpunt.

Het exacte algoritme dat wordt gebruikt om AnimatedIcon State-wijzigingen toe te wijzen aan markeringsweergaveposities:

  • Controleer de markeringen van het opgegeven bestand op de markeringen [PreviousState]To[NewState]_Start" en "[PreviousState]To[NewState]_End". Als beide animaties worden gevonden, speel de animatie af van "[PreviousState]To[NewState]_Start" tot "[PreviousState]To[NewState]_End".
  • Als "[PreviousState]To[NewState]_Start" niet is gevonden, maar "[PreviousState]To[NewState]_End" is gevonden, dan wordt er hard overgeschakeld naar de afspeelpositie van "[PreviousState]To[NewState]_End".
  • Als "[PreviousState]To[NewState]_End" niet is gevonden, maar "[PreviousState]To[NewState]_Start" wel is gevonden, ga dan abrupt naar de afspeelpositie van "[PreviousState]To[NewState]_Start".
  • Controleer of de opgegeven markeringen van IAnimatedVisualSource2 overeenkomen met de marker "[PreviousState]To[NewState]". Als het wordt gevonden, direct knippen naar de afspeelpositie "[PreviousState]To[NewState]".
  • Controleer of de opgegeven IAnimatedVisualSource2-markeringen voor "[NewState]" zijn. Als deze wordt gevonden, direct overgaan naar de afspeelpositie [NewState].
  • Controleer of de opgegeven markeringen van IAnimatedVisualSource2 een markering hebben die eindigt op 'To[NewState]_End'. Als er een markering wordt gevonden die dat einde heeft, maak dan een harde overgang naar de eerste markering met de juiste uitgang die gevonden wordt op de afspeelpositie.
  • Controleer of [NewState] wordt geparseerd naar een float. Als dat het geval is, animatie van de huidige positie naar de geparseerde float.
  • Harde overgang naar afspeelpositie 0,0.

In het volgende voorbeeld ziet u de markeringsindeling in een Lottie JSON-bestand. Zie de AnimatedIcon-richtlijnen voor meer informatie.

"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}]

Een standalone AnimatedIcon toevoegen

Het volgende voorbeeld is een knop waarop de gebruiker klikt om een prompt te accepteren.

De MyAcceptAnimation klasse wordt gemaakt met het hulpprogramma LottieGen .

De FallbackIconSource wordt gebruikt in plaats van de animatie wanneer animaties niet kunnen worden afgespeeld, zoals in oudere versies van Windows die Lottie-animaties niet ondersteunen.

Als de eindgebruiker animaties in hun systeeminstellingen uitschakelt, geeft AnimatedIcon het laatste frame weer van de statusovergang waarin de besturingselementen zich bevinden.

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

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

Voor de AnimatedIcon voor UWP-apps is WinUI 2 vereist. Zie WinUI 2 voor meer informatie, inclusief installatie-instructies. API's voor deze control bevinden zich in de Microsoft.UI.Xaml.Controls naamruimte.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

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

<muxc:AnimatedIcon />
  • Last updated on