Op tijd gebaseerde animaties

Wanneer een onderdeel in of een hele gebruikerservaring verandert, zien eindgebruikers het vaak op twee manieren: na verloop van tijd of onmiddellijk. Op het Windows-platform heeft de eerste de voorkeur boven de laatste: gebruikerservaringen die onmiddellijk veranderen verwarren en verrassen vaak eindgebruikers, omdat zij niet kunnen volgen wat er is gebeurd. De eindgebruiker ziet de beleving dan als schokkend en onnatuurlijk.

In plaats daarvan kunt u de gebruikersinterface in de loop van de tijd wijzigen om de eindgebruiker door te leiden of hen op de hoogte te stellen van wijzigingen in de ervaring. Op het Windows-platform wordt dit gedaan met behulp van op tijd gebaseerde animaties, ook wel KeyFrameAnimations genoemd. Met KeyFrameAnimations kunt u een gebruikersinterface in de loop van de tijd wijzigen en elk aspect van de animatie beheren, inclusief hoe en wanneer deze wordt gestart en hoe deze de eindstatus bereikt. Een object bijvoorbeeld animeren naar een nieuwe positie van meer dan 300 milliseconden is prettiger dan het daar direct 'teleporteren'. Wanneer u animaties gebruikt in plaats van onmiddellijke wijzigingen, is het nettoresultaat een aangenamere en aantrekkelijke ervaring.

Typen op tijd gebaseerde animaties

Er zijn twee categorieën op tijd gebaseerde animaties die u kunt gebruiken om prachtige gebruikerservaringen te bouwen in Windows:

Expliciete animaties – zoals de naam aangeeft, start u de animatie expliciet om updates uit te voeren. Impliciete animaties : deze animaties worden namens u door het systeem gestart wanneer aan een voorwaarde wordt voldaan.

Voor dit artikel bespreken we hoe u expliciete op tijd gebaseerde animaties maakt en gebruikt met KeyFrameAnimations.

Voor zowel expliciete als impliciete animaties op basis van tijd zijn er verschillende typen, die overeenkomen met de verschillende typen eigenschappen van CompositionObjects die u kunt animeren.

• ColorKeyFrameAnimation
• QuaternionToetsframeAnimatie
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Tijdgebaseerde animaties maken met KeyFrameAnimations

Voordat u beschrijft hoe u expliciete op tijd gebaseerde animaties maakt met KeyFrameAnimations, gaan we een paar concepten door.

• KeyFrames: dit zijn de afzonderlijke momentopnamen die een animatie doorloopt.
  • Gedefinieerd als sleutel- en waardeparen. De sleutel vertegenwoordigt de voortgang tussen 0 en 1, ook wel waar deze 'momentopname' in de animatielevensduur plaatsvindt. De andere parameter vertegenwoordigt de eigenschapswaarde op dit moment.
• KeyFrameAnimation Properties : aanpassingsopties die u kunt toepassen om te voldoen aan de behoeften van de gebruikersinterface.
  • DelayTime– tijd voordat een animatie wordt gestart nadat StartAnimation is aangeroepen.
  • Duur: duur van de animatie.
  • IterationBehavior : aantal of oneindig herhalingsgedrag voor een animatie.
  • IterationCount: het aantal eindige keren dat een KeyFrame-animatie wordt herhaald.
  • KeyFrame Count : lees hoeveel KeyFrames er zijn in een bepaalde KeyFrame-animatie.
  • StopBehavior : hiermee geeft u het gedrag van een eigenschapswaarde aan wanneer StopAnimation wordt aangeroepen.
  • Richting: hiermee geeft u de richting van de animatie op voor het afspelen.
• Animatiegroep: meerdere animaties tegelijk starten.
  • Vaak gebruikt wanneer u meerdere eigenschappen tegelijk wilt animeren.

Zie CompositionAnimationGroup voor meer informatie.

Laten we met deze concepten de algemene formule bespreken voor het maken van een KeyFrameAnimation:

1. Identificeer het CompositionObject en de bijbehorende eigenschap die u moet animeren.
2. Maak een KeyFrameAnimation-typesjabloon van de compositor die overeenkomt met het type eigenschap dat u wilt animeren.
3. Gebruik de animatiesjabloon om KeyFrames toe te voegen en eigenschappen van de animatie te definiëren.
   • Er is ten minste één KeyFrame vereist (het keyframe van 100% of 1f).
   • Het wordt aanbevolen ook een duur te definiëren.
4. Zodra u klaar bent om deze animatie uit te voeren, roept u StartAnimation(...) aan op het CompositionObject, gericht op de eigenschap die u wilt animeren. Specifiek:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Als u een actieve animatie hebt en u de animatie of animatiegroep wilt stoppen, kunt u deze API's gebruiken:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Laten we een voorbeeld bekijken om deze formule in actie te zien.

Voorbeeld

In dit voorbeeld wilt u de verschuiving van een visual van <0,0,0> tot <200,0,0> over 1 seconde animeren. Daarnaast wilt u de visuele animatie tussen deze posities 10 keer zien.

U begint met het identificeren van het CompositionObject en de eigenschap die u wilt animeren. In dit geval wordt het rode vierkant vertegenwoordigd door een Composition Visual met de naam redVisual. U start de animatie vanuit dit object.

Vervolgens, omdat u de Offset-eigenschap wilt animeren, moet u een Vector3KeyFrameAnimation maken (Offset is van het type Vector3). U definieert ook de bijbehorende KeyFrames voor de KeyFrameAnimation.

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

Vervolgens definieert u de eigenschappen van de KeyFrameAnimation om de duur ervan te beschrijven, samen met het gedrag dat moet worden geanimeerd tussen de twee posities (huidige en <200,0,0>) 10 keer.

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

Ten slotte moet u een animatie starten op een eigenschap van een CompositionObject om deze uit te voeren.

redVisual.StartAnimation("Offset", animation);

Hier volgt de volledige code.

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);
}