Dela via


Kompositionsanimeringar

Med API:er för Microsoft.UI.Composition kan du skapa, animera, transformera och manipulera compositorobjekt i ett enhetligt API-lager. Kompositionsanimeringar är ett kraftfullt och effektivt sätt att köra animeringar i ditt WinUI-appgränssnitt. De har utformats från grunden för att säkerställa att dina animeringar körs på 60 FPS oberoende av användargränssnittstråden och för att ge dig flexibiliteten att skapa fantastiska upplevelser med inte bara tid, men indata och andra egenskaper, för att driva animeringar.

Rörelse i Windows

Tänk på rörelsedesign som en film. Sömlösa övergångar gör att du fokuserar på berättelsen och ger liv åt upplevelser. Vi kan bjuda in den känslan i vår design, vilket leder människor från en uppgift till en annan med filmisk lätthet. Rörelse är ofta den särskiljande faktorn mellan ett användargränssnitt och en användarupplevelse.

Som en grundläggande byggsten i Windows UI Platform är CompositionAnimations ett kraftfullt och effektivt sätt att skapa rörelseupplevelser i programmets användargränssnitt. Animeringsmotorn har utformats från grunden för att säkerställa att din rörelse körs på 60 FPS, oberoende av användargränssnittstråden. De här animeringarna är utformade för att ge flexibiliteten att skapa innovativa rörelseupplevelser baserat på tid, indata och andra egenskaper.

Exempel på rörelse

Här följer några exempel på rörelse i en app.

Här använder en app en ansluten animering för att animera en objektbild när den "fortsätter" att bli en del av rubriken på nästa sida. Effekten hjälper till att upprätthålla användarkontexten under övergången.

Ett exempel på ansluten animering

Här flyttar en visuell parallaxeffekt olika objekt i olika takt när användargränssnittet rullar eller panorerar för att skapa en känsla av djup, perspektiv och rörelse.

Ett exempel på parallax med en lista och bakgrundsbild

Använda CompositionAnimations för att skapa rörelse

För att generera rörelse i användargränssnittet kan utvecklare komma åt animeringar i XAML eller det visuella lagret. Animeringar på visualiseringsskiktet ger utvecklare en rad fördelar:

  • Prestanda – i stället för den traditionella trådbundna animeringen för användargränssnittet fungerar animeringar på Windows UI-plattformen på en oberoende tråd på 60 FPS, vilket möjliggör smidiga rörelseupplevelser.
  • Mallmodell – animeringar i Windows UI-lagret är mallar, vilket innebär att du kan använda en enda animering på flera objekt och justera egenskaper eller parametrar utan att behöva hindra tidigare användningsområden.
  • Anpassning – Windows UI-lagret gör det inte bara enkelt att skapa snygga användargränssnitt, utan med ett komplett utbud av animeringstyper, möjligt att skapa nya och fantastiska upplevelser med en toning av anpassningar

Som utvecklare som skapar upplevelser på UI-lagret i Windows har du tillgång till en mängd olika animeringsbegrepp som ger liv åt dina design. Du kan använda något av dessa begrepp för att animera en egenskap eller underkanalskomponent (i förekommande fall) för valfri CompositionObject.

Anmärkning

Alla egenskaper hos ett CompositionObject är inte animerbara. Se dokumentationen för det enskilda Kompositionsobjektet för att avgöra om en egenskap är animerbar.

Anmärkning

Termen underkanal refererar till en komponentform av en egenskap. Till exempel X- eller XY-underkanal för en Vector3 Offset-egenskap.

Koncept för animering Beskrivning
Tidsbaserad rörelse med KeyFrameAnimations KeyFrameAnimations används för att styra hela en rörelseupplevelse direkt under en viss tidsperiod. Utvecklare som beskriver en rörelses start, slut, interpolering däremellan och varaktighet på ett traditionellt nyckelbildsbaserat sätt.
Relativ rörelse med ExpressionAnimations ExpressionAnimations används för att beskriva hur en rörelse i ett objekts egenskap ska drivas i förhållande till ett annat objekts egenskap. Utvecklare definierar en matematisk ekvation som definierar den referensbaserade relationen.
Implicit Animeringar Dessa animeringar är utlösarbaserade och definieras separat från kärnapplogik. ImplicitAnimationer används för att beskriva hur och när animeringar sker som ett svar på direkta egenskapsändringar.
Indatadriven rörelse med Input Animations Indataanimeringar omfattar en uppsättning scenarier som gör det möjligt för utvecklare att beskriva manipuleringsbaserad rörelse via touch eller andra indatamodaliteter. Dessa animeringar drivs baserat på aktiva användarindata eller gester.
Fysikbaserad rörelse med NaturalMotionAnimations NaturalMotionAnimations används för att beskriva naturliga och välbekanta rörelseupplevelser baserade på verkliga kraftdrivna rörelser. I stället för att definiera tid definierar utvecklare rörelseegenskaper (till exempel dämpningsförhållande för fjädrar)