Animatiepatronen
In dit onderwerp vindt u meer informatie over hoe u animatie doelgericht kunt gebruiken om ervaringen visueel te bundelen en een verhaal te vertellen. De scenariospecifieke animaties in Windows 8 zijn ontworpen om informatie over te brengen, mensen te helpen zodat ze weten wat ze kunnen verwachten en om vertrouwen te geven. Raadpleeg de gedetailleerde handleidingen en onderwerpen met procedures in het gedeelte De gebruikersinterface van animatie voorzien.
De app starten
De eerste pagina van de app in beeld brengen
JavaScript: gebruik enterPage
XAML: gebruik EntranceThemeTransition
Zie ook Overgangen van animatie voorzien met de animatiebibliotheek
Overgangen tussen pagina's
Overgang van de ene pagina van de app naar een andere
JavaScript: gebruik exitPage en vervolgens enterPage
XAML: gebruik EntranceThemeTransition
Zie ook Overgangen van animatie voorzien met de animatiebibliotheek
Overgangen tussen inhoud
Overgang tussen de verschillende delen met inhoud in een gebied op de pagina
JavaScript: gebruik exitContent en vervolgens enterContent
XAML: gebruik ContentThemeTransition
Zie ook Overgangen van animatie voorzien met de animatiebibliotheek
Feedback na aanraken en klikken
Zichtbare feedback tonen die de gebruiker heeft aangeraakt of waarop de gebruiker heeft geklikt op een tegel
JavaScript: gebruik pointerDown en vervolgens pointerUp
XAML: gebruik PointerDownThemeAnimation en vervolgens PointerUpThemeAnimation
Zie ook Aanwijzers van animatie voorzien met de animatiebibliotheek
Tijdelijke gebruikersinterface of besturingselementen weergeven
Tijdelijke gebruikersinterface of besturingselementen weergeven of verbergen
JavaScript: gebruik fadeIn en vervolgens fadeOut
XAML: gebruik FadeInThemeAnimation en vervolgens FadeOutThemeAnimation
Zie ook Elementen van de gebruikersinterface van animatie voorzien met de animatiebibliotheek
Vernieuwen
Inhoud vernieuwen of een wijziging in de indeling van de bestaande pagina voorzien van animatie
JavaScript: gebruik crossFade
XAML: gebruik FadeOutThemeAnimation en vervolgens FadeInThemeAnimation
Zie ook Elementen van de gebruikersinterface van animatie voorzien met de animatiebibliotheek
Aanvullende besturingselementen of inhoud inline weergeven
Ruimte maken en aanvullende besturingselementen of inhoud weergeven binnen de bestaande gebruikersinterface
JavaScript: gebruik createExpandAnimation en vervolgens createCollapseAnimation
XAML: niet van toepassing
Items aan een lijst toevoegen of uit een lijst verwijderen
Een of meer items aan een bestaande lijst toevoegen of uit een bestaande lijst verwijderen
JavaScript: gebruik createAddToListAnimation en vervolgens createDeleteFromListAnimation
XAML: gebruik AddDeleteThemeTransition
Zie ook Lijsten en lijstitems van animatie voorzien met de animatiebibliotheek
Een lijst filteren tijdens het zoeken
Snel veel items aan een lijst toevoegen of uit een lijst verwijderen tijdens het zoeken
JavaScript: gebruik createAddToSearchListAnimation en vervolgens createDeleteFromSearchListAnimation
XAML: niet van toepassing
Zie ook Lijsten en lijstitems van animatie voorzien met de animatiebibliotheek
Een opdracht of berichtenbalk weergeven
Een opdracht of berichtenbalk aan de rand van het scherm weergeven
JavaScript: gebruik showEdgeUI en vervolgens hideEdgeUI
XAML: gebruik EdgeUIThemeTransition
Zie ook Oppervlakken van de gebruikersinterface van animatie voorzien met de animatiebibliotheek
Een taakvenster weergeven
Een taakvenster of andere grote container voor gebruikersinterface-elementen aan de rand van het scherm weergeven
JavaScript: gebruik showPanel en vervolgens hidePanel
XAML: gebruik PaneThemeTransition
Zie ook Oppervlakken van de gebruikersinterface van animatie voorzien met de animatiebibliotheek
Pop-upelementen van de gebruikersinterface weergeven
Pop-upelementen van de gebruikersinterface, zoals een flyout of contextmenu, weergeven
JavaScript: gebruik showPopup en vervolgens hidePopup
XAML: gebruik PopInThemeAnimation en vervolgens PopOutThemeAnimation
Zie ook Oppervlakken van de gebruikersinterface van animatie voorzien met de animatiebibliotheek
Slepen en neerzetten
Items slepen en neerzetten om de volgorde van een lijst te wijzigen
JavaScript: gebruik dragSourceStart, dragSourceEnd, dragBetweenEnter en dragBetweenLeave
XAML: gebruik DragItemThemeAnimation, DropTargetItemThemeAnimation en DragOverThemeAnimation
Zie ook Lijsten en lijstitems van animatie voorzien met de animatiebibliotheek
Een tegel selecteren door te vegen
Een tegel van animatie voorzien zodat deze teruggaat naar de uitgangspositie nadat de gebruiker een veegbeweging heeft gemaakt
JavaScript: gebruik swipeSelect en swipeDeselect
XAML: gebruik SwipeBackThemeAnimation
De mogelijkheid tot vegen onthullen
Animatie toevoegen om aan te geven dat de tegel een veegbeweging ondersteunt
JavaScript: gebruik swipeReveal
XAML: gebruik SwipeHintThemeAnimation
Een tegel bijwerken
Alle inhoud op een tegel bijwerken of tijdelijk aanvullende informatie op de tegel weergeven
JavaScript: gebruik createPeekAnimation
XAML: niet van toepassing
Een badge bijwerken
Een numerieke badge bijwerken met een nieuwe waarde
JavaScript: gebruik updateBadge
XAML: niet van toepassing
Verplaatsen
Elementen van de gebruikersinterface of inhoud verplaatsen
JavaScript: gebruik createRepositionAnimation
XAML: gebruik RepositionThemeTransition
Zie ook Elementen van de gebruikersinterface van animatie voorzien met de animatiebibliotheek
Verwante onderwerpen
