Animaties in XAML

Animaties kunnen uw app verbeteren door beweging en interactiviteit toe te voegen. Door de animaties uit de Windows Runtime-animatiebibliotheek te gebruiken, kunt u het Uiterlijk van Windows integreren in uw app. In dit onderwerp vindt u een overzicht van de animaties en voorbeelden van typische scenario's waarin elk ervan wordt gebruikt.

Animaties uit de Windows Runtime-animatiebibliotheek bieden de volgende voordelen:

• Bewegingen die overeenkomen met de Richtlijnen voor animaties
• Snelle, vloeiende overgangen tussen gebruikersinterfacestatussen die de gebruiker informeren, maar niet afleiden
• Visueel gedrag dat aangeeft dat overgangen binnen een app naar de gebruiker worden aangegeven

Wanneer de gebruiker bijvoorbeeld een item toevoegt aan een lijst, wordt het nieuwe item niet direct in de lijst weergegeven, maar beweegt het met een animatie op zijn plaats. De andere items in de lijst animeren gedurende een korte periode hun nieuwe posities, waardoor ruimte wordt gemaakt voor het toegevoegde item. Het overgangsgedrag hier maakt de interactie met besturingselementen duidelijker voor de gebruiker.

Windows 10, versie 1607 introduceert een nieuwe ConnectedAnimationService-API voor het implementeren van animaties waarbij een element tijdens een navigatie een animatie tussen weergaven lijkt te animeren. Deze API heeft een ander gebruikspatroon dan de andere animatiebibliotheek-API's. Het gebruik van ConnectedAnimationService wordt behandeld op de referentiepagina.

De animatiebibliotheek biedt geen animaties voor elk mogelijk scenario. Er zijn gevallen waarin u mogelijk een aangepaste animatie wilt maken in XAML. Zie Storyboarded animaties voor meer informatie.

Daarnaast kunnen ontwikkelaars voor bepaalde geavanceerde scenario's, zoals het animeren van een item op basis van de schuifpositie van een ScrollViewer, gebruik maken van visual layer-interoperation om aangepaste animaties te implementeren. Zie Visual Layer voor meer informatie.

Typen animaties

Het Windows Runtime-animatiesysteem en de animatiebibliotheek dienen het grotere doel van het inschakelen van besturingselementen en andere onderdelen van de gebruikersinterface om een geanimeerd gedrag te hebben. Er zijn verschillende soorten animaties.

• themaovergangen automatisch worden toegepast wanneer bepaalde voorwaarden in de gebruikersinterface veranderen, waarbij besturingselementen of elementen van de vooraf gedefinieerde gebruikersinterfacetypen van Windows Runtime XAML worden gebruikt. Dit worden themaovergangen genoemd omdat de animaties het Uiterlijk en het uiterlijk van Windows ondersteunen en bepalen wat alle apps doen voor bepaalde UI-scenario's wanneer ze van de ene interactiemodus naar de andere veranderen. De themaovergangen maken deel uit van de animatiebibliotheek.
• themaanimaties animaties zijn animaties voor een of meer eigenschappen van vooraf gedefinieerde gebruikersinterfacetypen van Windows Runtime XAML. Themaanimaties verschillen van themaovergangen omdat themaanimaties zich richten op één specifiek element en bestaan in specifieke visuele toestanden binnen een besturingselement, terwijl de themaovergangen worden toegewezen aan eigenschappen van het besturingselement dat buiten de visuele statussen bestaat en invloed hebben op de overgangen tussen die statussen. Veel van de Besturingselementen van Windows Runtime XAML bevatten themaanimaties binnen storyboards die deel uitmaken van hun besturingssjabloon, waarbij de animaties worden geactiveerd door visuele statussen. Zolang u de sjablonen niet wijzigt, zijn deze ingebouwde themaanimaties beschikbaar voor de besturingselementen in uw gebruikersinterface. Als u echter wel sjablonen vervangt, verwijdert u ook de ingebouwde thema-animaties voor besturingselementen. Als u ze terug wilt krijgen, moet u een storyboard definiëren dat themaanimaties bevat binnen de set visuele toestanden van het besturingselement. U kunt ook themaanimaties uitvoeren vanuit storyboards die zich niet in visuele toestanden bevinden en deze starten met de methode Begin , maar dat is minder gebruikelijk. Themaanimaties maken deel uit van de animatiebibliotheek.
• Visuele overgangen worden toegepast wanneer een besturingselement overgaat van een van de gedefinieerde visuele statussen naar een andere status. Dit zijn aangepaste animaties die u schrijft en zijn meestal gerelateerd aan de aangepaste sjabloon die u schrijft voor een besturingselement en de definities van de visuele status in die sjabloon. De animatie wordt alleen uitgevoerd tijdens de tijd tussen statussen en dat is meestal een korte hoeveelheid tijd, maximaal een paar seconden. Voor meer informatie, zie de sectie 'VisualTransition' van Storyboard-animaties voor visuele toestanden.
• storyboard animaties animeren de waarde van een Windows Runtime-afhankelijkheidseigenschap in de loop van de tijd. Storyboards kunnen worden gedefinieerd als onderdeel van een visuele overgang of worden geactiveerd tijdens runtime door de toepassing. Zie Storyboarded animaties voor meer informatie. Zie het overzicht van eigenschappen van afhankelijkheden voor meer informatie over eigenschappen van afhankelijkheden en waar deze bestaan.
• Met verbonden animaties van de nieuwe ConnectedAnimationService-API kunnen ontwikkelaars eenvoudig een effect maken waarbij een element tijdens een navigatie een animatie tussen weergaven lijkt te geven. Deze API is beschikbaar vanaf Windows 10 versie 1607. Zie ConnectedAnimationService voor meer informatie.

Animaties die beschikbaar zijn in de bibliotheek

De volgende animaties worden geleverd in de animatiebibliotheek. Klik op de naam van een animatie voor meer informatie over de belangrijkste gebruiksscenario's, hoe u deze definieert en om een voorbeeld van de animatie weer te geven.

• Paginaovergang: animeert paginaovergangen in een Frame.
• Overgang van inhoud en ingang: een stuk of set inhoud in- of uit beeld brengen.
• in- en uitfaden, en crossfaden: toont tijdelijke elementen of knoppen, of vernieuwt een inhoudsgebied.
• Aanwijzer omhoog/omlaag: geeft visuele feedback van een tik of klik op een tegel.
• verplaatsen: hiermee verplaatst u een element naar een nieuwe positie.
• Pop-up weergeven/verbergen: hiermee wordt de contextuele gebruikersinterface boven op de weergave weergegeven.
• Edge UI-weergeven/verbergen: Schuift rand-gebaseerde gebruikersinterface, inclusief grote UI-elementen zoals een paneel, in of uit zicht.
• Wijzigingen in lijstitems: hiermee voegt u een item toe aan of verwijdert u het item uit een lijst of wijzigt u de volgorde van de items.
• Slepen/neerzetten: geeft visuele feedback tijdens een slepen-en-neerzetten-bewerking.

Paginaovergang

Gebruik paginaovergangen om navigatie binnen een app te animeren. Omdat bijna alle apps een bepaald soort navigatie gebruiken, zijn paginaovergangsanimaties het meest voorkomende type themaanimatie dat door apps wordt gebruikt. Zie NavigationThemeTransition voor meer informatie over de api's voor paginaovergang.

Overgang van inhoud en entreeovergang

Gebruik animaties voor inhoudsovergang (ContentThemeTransition) om een stuk of een set inhoud naar of uit de huidige weergave te verplaatsen. In de animaties voor inhoudsovergang wordt bijvoorbeeld inhoud weergegeven die niet gereed was om weer te geven toen de pagina voor het eerst werd geladen of wanneer de inhoud in een sectie van een pagina verandert.

EntranceThemeTransition vertegenwoordigt een beweging die kan worden toegepast op inhoud wanneer een pagina of een grote sectie van de gebruikersinterface voor het eerst wordt geladen. Het eerste uiterlijk van inhoud kan dus andere feedback bieden dan een wijziging in de inhoud. EntranceThemeTransition is gelijk aan een NavigationThemeTransition met de standaardparameters, maar kan buiten een Frameworden gebruikt.

In-/uitfaden en kruisfade

Gebruik in- en vervagende animaties om tijdelijke gebruikersinterface of besturingselementen weer te geven of te verbergen. In XAML worden deze weergegeven als FadeInThemeAnimation en FadeOutThemeAnimation. Een voorbeeld is in een app-balk waarin nieuwe besturingselementen kunnen verschijnen door gebruikersinteractie. Een ander voorbeeld is een tijdelijke schuifbalk of panning-indicator die is vervaagd nadat er enige tijd geen gebruikersinvoer is gedetecteerd. Apps moeten ook de fade-in animatie gebruiken wanneer ze overschakelen van een tijdelijke aanduiding naar het definitieve item bij het dynamisch laden van inhoud.

Gebruik een kruisfadeanimatie om de overgang te vereffenen wanneer de status van een item verandert; Bijvoorbeeld wanneer de app de huidige inhoud van een weergave vernieuwt. De XAML-animatiebibliotheek levert geen speciale crossfade-animatie, maar u kunt hetzelfde resultaat bereiken met behulp van FadeInThemeAnimation en FadeOutThemeAnimation met overlappende timing.

Aanwijzer omhoog/omlaag

Gebruik de animaties PointerUpThemeAnimation en PointerDownThemeAnimation om de gebruiker feedback te geven voor een geslaagde tik of klik op een tegel. Wanneer een gebruiker bijvoorbeeld op een tegel klikt of tikt, wordt de aanwijzer omlaag afgespeeld. Zodra de klik of tik is vrijgegeven, wordt de aanwijzer omhoog-animatie afgespeeld.

Verplaatsen

Gebruik de animaties (RepositionThemeAnimation of RepositionThemeTransition) om een element naar een nieuwe positie te verplaatsen. Als u bijvoorbeeld de kopteksten in een itemscontrol verplaatst, wordt de herpositioneringsanimatie gebruikt.

Pop-up weergeven/verbergen

Gebruik de PopInThemeAnimation- en PopOutThemeAnimation wanneer u een pop-up venster weergeeft en verbergt of een vergelijkbare contextuele gebruikersinterface bovenop de huidige weergave. PopupThemeTransition is een themaovergang die nuttige feedback geeft wanneer u een pop-up licht wilt sluiten.

Edge-gebruikersinterface weergeven/verbergen

Gebruik de EdgeUIThemeTransition animatie om een kleine, edge-gebruikersinterface in en uit beeld te schuiven. Gebruik deze animaties bijvoorbeeld wanneer u een aangepaste app-balk boven of onder aan het scherm of een UI-oppervlak weergeeft voor fouten en waarschuwingen boven aan het scherm.

Gebruik de PaneThemeTransition animatie om een paneel of deelvenster weer te geven en te verbergen. Dit is voor een grote gebruikersinterface op basis van edge, zoals een aangepast toetsenbord of een taakvenster.

Wijzigingen in lijstitem

Gebruik de animatie AddDeleteThemeTransition om gedrag met animatie toe te voegen wanneer u een item in een bestaande lijst toevoegt of verwijdert. Als u wilt toevoegen, verplaatst de overgang eerst bestaande items in de lijst om ruimte te maken voor de nieuwe items en voegt u de nieuwe items vervolgens toe. Bij het verwijderen verwijdert de overgang items uit een lijst en worden indien nodig de resterende lijstitems verplaatst nadat de items zijn verwijderd.

Er is ook een afzonderlijke ReorderThemeTransition- die u toepast wanneer een item van positie verandert in een lijst. Dit is anders geanimeerd dan het verwijderen van een item en het toevoegen op een nieuwe plaats met de bijbehorende animaties verwijderen/toevoegen.

Houd er rekening mee dat deze animaties zijn opgenomen in de standaardsjablonen van ListView en GridView, zodat u deze animaties niet handmatig hoeft toe te voegen als u deze besturingselementen al gebruikt.

Slepen/neerzetten

Gebruik de sleepanimaties (DragItemThemeAnimation, DragOverThemeAnimation) en neerzetanimatie (DropTargetItemThemeAnimation) om visuele feedback te geven wanneer de gebruiker een item sleept of neerzet.

Wanneer de animaties actief zijn, wordt de gebruiker weergegeven dat de lijst opnieuw kan worden gerangschikt rond een verwijderd item. Het is handig voor gebruikers om te weten waar het item in een lijst wordt geplaatst als het op de huidige locatie wordt laten vallen. De animaties geven visuele feedback dat een item dat wordt gesleept, kan worden verwijderd tussen twee andere items in de lijst en dat deze items uit de weg worden verplaatst.

Animaties gebruiken met aangepaste besturingselementen

De volgende tabel bevat een overzicht van onze aanbevelingen voor welke animatie u moet gebruiken wanneer u een aangepaste versie van deze Windows Runtime-besturingselementen maakt:

Voorbeelden van overgangsanimatie

In het ideale voorbeeld maakt uw app gebruik van animaties om de gebruikersinterface te verbeteren of om deze aantrekkelijker te maken zonder uw gebruikers te vervelen. U kunt dit onder andere doen door animatieovergangen toe te passen op de gebruikersinterface, zodat wanneer iets het scherm binnenkomt of op een andere manier verandert, de animatie de aandacht van de gebruiker trekt naar de wijziging. Uw knoppen kunnen bijvoorbeeld snel in- en uit beeld verdwijnen, in plaats van alleen maar te verschijnen en te verdwijnen. We hebben een aantal API's gemaakt die kunnen worden gebruikt om aanbevolen of typische animatieovergangen te maken die consistent zijn. In het voorbeeld ziet u hoe u een animatie toepast op een knop, zodat deze snel in beeld wordt gebracht.

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

In deze code voegen we het EntranceThemeTransition--object toe aan de overgangscollectie van de knop. Wanneer de knop voor het eerst wordt weergegeven, schuift hij snel in beeld in plaats van simpelweg te verschijnen. U kunt enkele eigenschappen van het animatieobject instellen om aan te passen hoe ver het schuift en uit welke richting, maar het is echt bedoeld als een eenvoudige API voor een specifiek scenario, namelijk om een oogverblindende binnenkomst te maken.

U kunt ook thema's voor overgangsanimatie definiëren in de stijlbronnen van uw app, zodat u het effect uniform kunt toepassen. Dit voorbeeld is gelijk aan de vorige, maar wordt alleen toegepast met behulp van een stijl:

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

In de vorige voorbeelden wordt een themaovergang toegepast op een afzonderlijk besturingselement, maar themaovergangen zijn nog interessanter wanneer u deze toepast op een container met objecten. Wanneer u dit doet, zullen alle onderliggende objecten van de container deelnemen aan de overgang. In het volgende voorbeeld wordt een EntranceThemeTransition toegepast op een Raster van rechthoeken.

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

De onderliggende rechthoeken van het Raster verschijnen een voor een op een visueel aantrekkelijke manier, in plaats van allemaal tegelijk, zoals het geval zou zijn als u deze animatie afzonderlijk op de rechthoeken zou hebben toegepast.

Hier volgt een demonstratie van deze animatie:

Kind-objecten van een container kunnen ook opnieuw worden gerangschikt wanneer een of meer van deze kinderen van positie veranderen. In het volgende voorbeeld passen we een RepositionThemeTransition toe op een raster met rechthoeken. Wanneer u een van de rechthoeken verwijdert, stromen alle andere rechthoeken opnieuw naar hun nieuwe positie.

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}

U kunt meerdere overgangsanimaties toepassen op één object of objectcontainer. Als u bijvoorbeeld wilt dat de lijst met rechthoeken in beeld verschijnt en ook geanimeerd worden wanneer ze van positie veranderen, kunt u de RepositionThemeTransition en de EntranceThemeTransition als volgt toepassen:

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...      

Er zijn verschillende overgangseffecten om animaties te maken op uw UI-elementen wanneer ze worden toegevoegd, verwijderd, opnieuw gerangschikt, enzovoort. De namen van deze API's bevatten allemaal ThemaTransition:

Voorbeelden van themaanimatie

Overgangsanimaties zijn eenvoudig toe te passen. Maar misschien wilt u wat meer controle hebben over de timing en volgorde van uw animatie-effecten. U kunt themaanimaties gebruiken om meer controle in te schakelen terwijl u nog steeds een consistent thema gebruikt voor de werking van uw animatie. Themaanimaties vereisen ook minder opmaak dan aangepaste animaties. Hier gebruiken we de FadeOutThemeAnimation om een rechthoek uit het zicht te laten vervagen.

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

In tegenstelling tot overgangsanimaties heeft een themaanimatie geen ingebouwde trigger (de overgang) waarmee deze automatisch wordt uitgevoerd. U moet een Storyboard gebruiken om een thema-animatie te bevatten wanneer u deze definieert in XAML. U kunt ook het standaardgedrag van de animatie wijzigen. U kunt bijvoorbeeld de fade-out vertragen door de duur tijdswaarde op de FadeOutThemeAnimation-te verhogen.

U kunt verschillende andere themaanimaties toepassen op uw UI-elementen om animatie-effecten te maken. De namen van deze API bevatten allemaal 'ThemeAnimation':

Uw eigen animaties maken

Wanneer themaanimaties niet voldoende zijn voor uw behoeften, kunt u uw eigen animaties maken. U kunt objecten animeren door een of meer van hun eigenschapswaarden aan te animeeren. U kunt bijvoorbeeld animatie toepassen op de breedte van een rechthoek, de hoek van een RotateTransform of de kleurwaarde van een knop. Dit type aangepaste animatie wordt een storyboard-animatie genoemd om deze te onderscheiden van de bibliotheekanimaties die de Windows Runtime al biedt als vooraf geconfigureerd animatietype. Voor geanimeerde storyboard-animaties gebruikt u een animatie waarmee waarden van een bepaald type kunnen worden gewijzigd (bijvoorbeeld DoubleAnimation om een Doublete animeren) en plaatst u die animatie in een Storyboard om deze te beheren.

Om geanimeerd te worden, moet de eigenschap die u aan het animeren bent een afhankelijkheidseigenschapzijn. Zie het overzicht van eigenschappen van afhankelijkheden voor meer informatie over eigenschappen van afhankelijkheden. Zie voor meer informatie over het maken van aangepaste storyboard-animaties, inclusief de manier waarop u ze kunt richten en beheren, storyboard-animaties.

Het grootste gebied van de definitie van de app-gebruikersinterface in XAML waar u aangepaste storyboard-animaties definieert, is als u visuele statussen definieert voor besturingselementen in XAML. Je doet dit omdat je een nieuwe besturingselementklasse maakt of omdat je een bestaand besturingselement met visuele toestanden in de besturingselementsjabloon opnieuw vormgeeft. Zie Storyboarded animaties voor visuele statenvoor meer informatie.