Samenstellingsanimaties

Met de API's microsoft.UI.Composition kunt u compositor-objecten maken, animeren, transformeren en bewerken in een uniforme API-laag. Samenstellingsanimaties bieden een krachtige en efficiënte manier om animaties uit te voeren in de gebruikersinterface van uw WinUI-app. Ze zijn vanaf de basis ontworpen om ervoor te zorgen dat uw animaties worden uitgevoerd op 60 FPS, onafhankelijk van de UI-thread, en om u de flexibiliteit te bieden om geweldige ervaringen op te bouwen met niet alleen tijd, maar ook met invoer en andere eigenschappen, om animaties aan te sturen.

Beweging in Windows

Denk aan bewegingsontwerp als een film. Naadloze overgangen houden u gefocust op het verhaal en brengen ervaringen tot leven. We kunnen dat gevoel uitnodigen in onze ontwerpen, waardoor mensen van de ene taak naar de andere met filmisch gemak worden geleid. Beweging is vaak de differentiërende factor tussen een gebruikersinterface en een gebruikerservaring.

Als fundamentele bouwsteen van het Windows UI-platform bieden CompositionAnimations een krachtige en efficiënte manier om bewegingservaringen te maken in de gebruikersinterface van uw toepassing. De animatie-engine is vanaf de grond ontworpen om ervoor te zorgen dat uw beweging wordt uitgevoerd op 60 FPS, onafhankelijk van de UI-thread. Deze animaties zijn ontworpen om de flexibiliteit te bieden om innovatieve bewegingservaringen te bouwen op basis van tijd, invoer en andere eigenschappen.

Voorbeelden van beweging

Hier volgen enkele voorbeelden van beweging in een app.

Hier maakt een app gebruik van een verbonden animatie om een itemafbeelding te animeren, omdat deze 'blijft' deel uitmaken van de koptekst van de volgende pagina. Het effect helpt bij het onderhouden van gebruikerscontext tijdens de overgang.

Hier zorgt een visueel parallax-effect ervoor dat verschillende objecten met verschillende snelheden bewegen wanneer de gebruikersinterface verschuift of scrolt om een gevoel van diepte, perspectief en beweging te creëren.

CompositionAnimations gebruiken om beweging te maken

Ontwikkelaars hebben toegang tot animaties in XAML of de visuallaag om beweging te genereren in de gebruikersinterface. Animaties op de Visual Layer bieden ontwikkelaars een reeks voordelen:

• Prestaties: in plaats van de traditionele ui thread-gebonden animatie, werken animaties op het Windows UI-platform op een onafhankelijke thread op 60 FPS, waardoor vloeiende bewegingservaringen mogelijk zijn.
• Templating Model: animaties in de Windows UI-laag zijn sjablonen, wat betekent dat u één animatie op meerdere objecten kunt gebruiken en eigenschappen of parameters kunt aanpassen zonder dat u zich zorgen hoeft te maken over het belemmeren van eerdere toepassingen.
• Aanpassing: de Windows UI-laag maakt het niet alleen eenvoudig om een prachtige gebruikersinterface te maken, maar met een volledig scala aan animatietypen, mogelijk om nieuwe en geweldige ervaringen te maken met een kleurovergang van aanpassingen

Als ontwikkelaar die ervaringen maakt in de Windows UI-laag, hebt u toegang tot verschillende animatieconcepten om uw ontwerpen tot leven te brengen. U kunt een van deze concepten gebruiken om een eigenschap of subkanaalonderdeel (indien van toepassing) van elk CompositionObject te animeren.

Opmerking

Niet alle eigenschappen van een CompositionObject zijn animatiebaar. Raadpleeg de documentatie van het afzonderlijke CompositionObject om te bepalen of een eigenschap animeerbaar is.

Opmerking

De term subkanaal verwijst naar een onderdeelvorm van een eigenschap. Bijvoorbeeld het X- of XY-subkanaal van een Vector3 Offset-eigenschap.

Animatieconcept	Beschrijving
Beweging op basis van tijd met KeyFrameAnimations	KeyFrameAnimations worden gebruikt om de volledige bewegingservaring gedurende een bepaalde periode rechtstreeks te beheren. Ontwikkelaars beschrijven de begin-, eind-, interpolatie- en duur van een beweging op een traditionele, geframede manier.
Relatieve beweging met ExpressionAnimations	ExpressionAnimations worden gebruikt om te beschrijven hoe de animatie van een eigenschap van het ene object moet worden aangestuurd ten opzichte van een eigenschap van een ander object. Ontwikkelaars definiëren een wiskundige vergelijking die de relatie op basis van verwijzingen definieert.
Impliciete animaties	Deze animaties zijn gebaseerd op triggers en worden afzonderlijk gedefinieerd van de basis-app-logica. Impliciete animaties worden gebruikt om te beschrijven hoe en wanneer animaties optreden als reactie op directe eigenschapswijzigingen.
Invoergestuurde beweging met invoeranimaties	Invoeranimaties hebben betrekking op een reeks scenario's waarmee ontwikkelaars beweging op basis van manipulatie kunnen beschrijven via aanraking of andere invoermodaliteiten. Deze animaties worden gebaseerd op actieve gebruikersinvoer of bewegingen.
Op fysica gebaseerde beweging met NaturalMotionAnimations	NaturalMotionAnimations worden gebruikt om natuurlijke en vertrouwde bewegingservaringen te beschrijven op basis van echte krachtgestuurde beweging. In plaats van tijd te definiëren, definiëren ontwikkelaars kenmerken van de beweging (bijvoorbeeld dempingsverhouding voor Springs)