Delen via

Op relaties gebaseerde animaties

Dit artikel bevat een kort overzicht van het maken van op relaties gebaseerde animaties met behulp van Composition ExpressionAnimations.

Dynamische relationele ervaringen

Wanneer u bewegingservaringen in een app bouwt, zijn er momenten waarop de beweging niet op tijd is gebaseerd, maar afhankelijk is van een eigenschap op een ander object. KeyFrameAnimations kunnen deze typen bewegingservaringen niet heel eenvoudig uitdrukken. In deze specifieke gevallen hoeft beweging niet langer discreet en vooraf gedefinieerd te zijn. In plaats daarvan kan de beweging dynamisch worden aangepast op basis van de relatie met andere objecteigenschappen. U kunt bijvoorbeeld de opaciteit van een object animeren op basis van de horizontale positie. Andere voorbeelden zijn bewegingsinteracties zoals Sticky Headers en Parallax.

Met deze typen bewegingservaringen kunt u een gebruikersinterface maken die meer verbonden voelt, in plaats van enkelvoud en onafhankelijk te voelen. Voor de gebruiker geeft dit de indruk van een dynamische gebruikersinterface-ervaring.

Cirkel in baan

Lijstweergave met parallax

ExpressionAnimations gebruiken

Als u op relaties gebaseerde bewegingservaringen wilt maken, gebruikt u het type ExpressionAnimation. ExpressionAnimations (of expressies voor kort), zijn een nieuw type animatie waarmee u een wiskundige relatie kunt uitdrukken: een relatie die door het systeem wordt gebruikt om de waarde van een animatie-eigenschap in elk frame te berekenen. Expressies zijn gewoon een wiskundige vergelijking waarmee de gewenste waarde van een eigenschap voor animatie per frame wordt gedefinieerd. Expressies zijn een zeer veelzijdig onderdeel dat kan worden gebruikt in een breed scala aan scenario's, waaronder:

Wanneer u met ExpressionAnimations werkt, zijn er een aantal dingen die u vooraf moet vermelden:

  • Never Ending – in tegenstelling tot zijn KeyFrameAnimation-tegenhanger hebben expressies geen eindige duur. Omdat expressies wiskundige relaties zijn, zijn dit animaties die voortdurend worden uitgevoerd. U kunt deze animaties desgewenst stoppen.
  • Uitvoeren, maar niet altijd evalueren - prestaties zijn altijd een zorgpunt bij animaties die voortdurend draaien. U hoeft zich echter geen zorgen te maken, het systeem is slim genoeg dat de expressie alleen opnieuw evalueert als een van de invoer- of parameters is gewijzigd.
  • Omzetten naar het juiste objecttype: omdat expressies wiskundige relaties zijn, is het belangrijk om ervoor te zorgen dat de vergelijking waarmee de expressie wordt gedefinieerd, wordt omgezet in hetzelfde type eigenschap waarop de animatie van toepassing is. Als u bijvoorbeeld de Offset animeert, moet uw Expression neerkomt op een Vector3-type.

Onderdelen van een expressie

Bij het bouwen van de wiskundige relatie van een expressie zijn er verschillende kernonderdelen:

  • Parameters: waarden die constante waarden of verwijzingen naar andere samenstellingsobjecten vertegenwoordigen.
  • Wiskundige operatoren: de typische wiskundige operatoren plus(+), min(-), vermenigvuldigen(*), delen(/) die parameters samenvoegen om een vergelijking te vormen. Ook opgenomen zijn voorwaardelijke operatoren zoals groter dan(>), equal(==), ternaire operator (voorwaarde ? ifTrue : ifFalse), enzovoort.
  • Wiskundige functies: wiskundige functies/snelkoppelingen op basis van System.Numerics. Zie ExpressionAnimation voor een volledige lijst met ondersteunde functies.

Expressies ondersteunen ook een set trefwoorden: speciale woordgroepen die alleen afzonderlijke betekenis hebben binnen het ExpressionAnimation-systeem. Deze worden vermeld (samen met de volledige lijst met wiskundige functies) in de documentatie over ExpressionAnimation .

Expressies maken met ExpressionBuilder

Er zijn twee opties voor het bouwen van expressies in uw WinUI-app:

  1. Bouw de vergelijking als een tekenreeks via de officiële, openbare API.
  2. Bouw de vergelijking in een typeveilig objectmodel via het hulpprogramma ExpressionBuilder dat deel uitmaakt van de Windows Community Toolkit.

In het belang van dit document definiëren we onze expressies met behulp van ExpressionBuilder.

Parameterwaarden

Parameters vormen de kern van een expressie. Er zijn twee typen parameters:

  • Constanten: dit zijn parameters die de getypte System.Numerieke variabelen vertegenwoordigen. Aan deze parameters worden eenmaal de waarden toegewezen wanneer de animatie wordt gestart.
  • Verwijzingen: dit zijn parameters die verwijzingen naar CompositionObjects vertegenwoordigen. Deze parameters zorgen ervoor dat hun waarden continu worden bijgewerkt nadat een animatie is gestart.

Over het algemeen zijn verwijzingen het belangrijkste aspect voor de manier waarop de uitvoer van een expressie dynamisch kan worden gewijzigd. Naarmate deze verwijzingen veranderen, verandert de uitvoer van de expressie als gevolg hiervan. Als u uw expressie maakt met tekenreeksen of deze gebruikt in een sjabloonscenario (met behulp van uw expressie om meerdere CompositionObjects te targeten), moet u de waarden van uw parameters een naam geven en instellen. Zie de sectie Voorbeeld voor meer informatie.

Werken met KeyFrameAnimations

Expressies kunnen ook worden gebruikt met KeyFrameAnimations. In deze gevallen wilt u een expressie gebruiken om de waarde van een KeyFrame tegelijk te definiëren. Deze typen KeyFrames worden ExpressionKeyFrames genoemd.

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

In tegenstelling tot ExpressionAnimations worden ExpressionKeyFrames echter slechts eenmaal geëvalueerd wanneer de KeyFrameAnimation wordt gestart. Houd er rekening mee dat u geen ExpressionAnimation doorgeeft als de waarde van het KeyFrame, maar een tekenreeks (of een ExpressionNode, als u ExpressionBuilder gebruikt).

Voorbeeld

Laten we nu een voorbeeld bekijken van het gebruik van expressies, met name het PropertySet-voorbeeld uit de voorbeeldgalerie van de Windows-gebruikersinterface. We kijken naar de Expressie die het bewegingsgedrag van de baan van de blauwe bal beheert.

Cirkel in baan

Er zijn drie onderdelen die aan het spel zijn voor de totale ervaring:

  1. Een KeyFrameAnimation, die de Y-verschuiving van de rode bal animeert.
  2. Een PropertySet met een draaiingseigenschap waarmee de baan wordt bestuurd, geanimeerd door een andere KeyFrameAnimation.
  3. Een ExpressionAnimation die de offset van de blauwe bal aanstuurt, verwijzend naar de offset van de rode bal en de rotatie-eigenschap om een perfecte baan te behouden.

We concentreren ons op de ExpressionAnimation zoals gedefinieerd in #3. We gebruiken ook de ExpressionBuilder-klassen om deze expressie samen te stellen. Aan het einde wordt een kopie van de code weergegeven die wordt gebruikt om deze ervaring te bouwen via tekenreeksen.

In deze vergelijking zijn er twee eigenschappen waarnaar u moet verwijzen vanuit de PropertySet; een is een middelpuntverschil en de andere is de draaiing.

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

Vervolgens moet u het Vector3-onderdeel definiëren dat verantwoordelijk is voor de werkelijke draaiing van de baan.

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Opmerking

EF is een verkorte "using"-notatie om ExpressionFunctions te definiëren vanuit je WinUI-expressiebouwerbibliotheek.

Combineer tot slot deze onderdelen en verwijs naar de positie van de Rode Bal om de wiskundige relatie te definiëren.

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

In een hypothetische situatie, wat als u dezelfde expressie wilt gebruiken, maar met twee andere visuals. Dit betekent dat er 2 sets cirkels in een baan ronddraaien. Met CompositionAnimations kunt u de animatie opnieuw gebruiken en meerdere CompositionObjects targeten. Het enige dat u hoeft te wijzigen wanneer u deze Expression gebruikt voor de extra baancase, is de verwijzing naar de Visual. We noemen dit sjabloneren.

In dit geval wijzigt u de expressie die u eerder hebt gemaakt. In plaats van een verwijzing naar het CompositionObject op te halen, maakt u een verwijzing met een naam en wijst u vervolgens verschillende waarden toe:

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

Hier volgt de code als u uw expressie met tekenreeksen hebt gedefinieerd via de openbare API.

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);
  • Last updated on