Tidsbaserade animeringar

När en komponent i eller en hel användarupplevelse ändras observerar slutanvändarna det ofta på två sätt: över tid eller omedelbart. På Windows-plattformen föredras den förstnämnda framför det senare – användarupplevelser som omedelbart ändras förvirrar ofta och överraskar slutanvändare eftersom de inte kan följa vad som hände. Slutanvändaren uppfattar sedan upplevelsen som skakande och onaturlig.

I stället kan du ändra användargränssnittet över tid för att vägleda slutanvändaren genom eller meddela dem om ändringar i upplevelsen. På Windows-plattformen görs detta med hjälp av tidsbaserade animeringar, även kallade KeyFrameAnimations. Med KeyFrameAnimations kan du ändra ett användargränssnitt över tid och styra varje aspekt av animeringen, inklusive hur och när den startar, och hur det når sitt sluttillstånd. Till exempel är det trevligare att animera ett objekt till en ny position över 300 millisekunder än att omedelbart "teleportera" det där. När du använder animeringar i stället för omedelbara förändringar är nettoresultatet en trevligare och tilltalande upplevelse.

Typer av tidsbaserade animeringar

Det finns två kategorier av tidsbaserade animeringar som du kan använda för att skapa snygga användarupplevelser i Windows:

explicita animeringar – som namnet betyder startar du uttryckligen animeringen för att göra uppdateringar. Implicita animeringar – dessa animeringar startas av systemet för din räkning när ett villkor uppfylls.

I den här artikeln går vi igenom hur du skapar och använder explicita tidsbaserade animeringar med KeyFrameAnimations.

För både explicita och implicita tidsbaserade animeringar finns det olika typer som motsvarar de olika typerna av egenskaper för CompositionObjects som du kan animera.

• ColorKeyFrameAnimation
• KvaternionNyckelbildsAnimation
• SkalärNyckelBildAnimering
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Skapa tidsbaserade animeringar med KeyFrameAnimations

Innan vi beskriver hur du skapar explicita tidsbaserade animeringar med KeyFrameAnimations ska vi gå över några begrepp.

• KeyFrames – det här är de enskilda "ögonblicksbilder" som en animering går igenom.
  • Definieras som nyckel- och värdepar. Nyckeln representerar förloppet mellan 0 och 1, aka där den här "ögonblicksbilden" tar plats under animeringens livslängd. Den andra parametern representerar egenskapsvärdet just nu.
• KeyFrameAnimation Properties – anpassningsalternativ som du kan använda för att uppfylla användargränssnittets behov.
  • DelayTime – tid innan en animering startar efter att StartAnimation anropats.
  • Varaktighet – animeringens varaktighet.
  • IterationBehavior – antal eller oändligt upprepande beteende för en animering.
  • IterationCount – antal ändliga gånger som en KeyFrame-animering upprepas.
  • Antal nyckelramar – läs om hur många nyckelramar i en viss keyframe-animering.
  • StopBehavior – anger beteendet för ett animerande egenskapsvärde när StopAnimation anropas.
  • Riktning – anger riktningen för animeringen för uppspelning.
• Animeringsgrupp – starta flera animeringar samtidigt.
  • Används ofta när du vill animera flera egenskaper samtidigt.

Mer information finns i CompositionAnimationGroup.

Med de här begreppen i åtanke ska vi gå igenom den allmänna formeln för att skapa en KeyFrameAnimation:

1. Identifiera CompositionObject och dess tillhörande egenskap som du behöver animera.
2. Skapa en KeyFrameAnimation Type-mall för compositorn som matchar den typ av egenskap som du vill animera.
3. Med hjälp av animeringsmallen börjar du lägga till KeyFrames och definiera egenskaperna för animeringen.
   • Minst en nyckelram krävs (nyckelramen 100% eller 1f).
   • Vi rekommenderar att du även definierar en varaktighet.
4. När du är redo att köra den här animeringen anropar du StartAnimation(...) på CompositionObject och riktar in dig på den egenskap som du vill animera. Specifikt:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Om du har en animering som körs och vill stoppa animeringen eller animationsgruppen kan du använda dessa API:er:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Nu ska vi ta en titt på ett exempel för att se hur den här formeln fungerar.

Exempel

I det här exemplet vill du animera förskjutningen av ett visuellt objekt från <0,0,0> till <200,0,0> över 1 sekund. Dessutom vill du se det visuella objektet animera mellan dessa positioner 10 gånger.

Först börjar du med att identifiera egenskapen CompositionObject och den egenskap som du vill animera. I det här fallet representeras den röda fyrkanten av ett visuellt sammansättningsobjekt med namnet redVisual. Du startar animeringen från det här objektet.

Eftersom du sedan vill animera egenskapen Offset måste du skapa en Vector3KeyFrameAnimation (offset är av typen Vector3). Du definierar även motsvarande KeyFrames för KeyFrameAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Sedan definierar du egenskaperna för KeyFrameAnimation för att beskriva varaktigheten tillsammans med beteendet att animera mellan de två positionerna (aktuell och <200,0,0>) 10 gånger.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

För att kunna köra en animering måste du slutligen starta den på en egenskap för en CompositionObject.

redVisual.StartAnimation("Offset", animation);

Här är den fullständiga koden.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}