Relációs animációk

Ez a cikk rövid áttekintést nyújt arról, hogyan készíthet relációs animációkat a Composition ExpressionAnimations használatával.

Dinamikus relációs alapú élmények

Amikor mozgásélményeket hoz létre egy alkalmazásban, vannak olyan esetek, amikor a mozgás nem időalapú, hanem egy másik objektumon lévő tulajdonságtól függ. A KeyFrameAnimations nem tudja könnyen kifejezni az ilyen típusú mozgásélményeket. Ezekben a konkrét esetekben a mozgásnak már nem kell különállónak és előre definiáltnak lennie. Ehelyett a mozgás dinamikusan alkalmazkodhat a többi objektumtulajdonsághoz való viszonya alapján. Egy objektum átlátszatlanságát például a vízszintes pozíciója alapján animálhatja. Az egyéb példák között szerepelnek a mozgásélmények, mint a Ragadós fejlécek és a Parallax.

Az ilyen típusú mozgásélmények lehetővé teszik, hogy olyan felhasználói felületet hozzon létre, amely összekapcsoltabbnak érzi magát ahelyett, hogy különállónak és függetlennek érzi magát. A felhasználó számára ez egy dinamikus felhasználói felület benyomását kelti.

ExpressionAnimations használata

Relációs alapú mozgásélmények létrehozásához a ExpressionAnimation típust kell használnia. Az ExpressionAnimations (vagy röviden Expressions) egy új típusú animáció, amely lehetővé teszi egy matematikai kapcsolat kifejezését – ezt a kapcsolatot a rendszer egy animáló tulajdonság értékének minden kockában történő kiszámításához használja. Másként fogalmazva a kifejezések egyszerűen matematikai egyenletek, amelyek keretenként határozzák meg az animálási tulajdonság kívánt értékét. A kifejezések rendkívül sokoldalú összetevők, amelyek számos forgatókönyvben használhatók, például:

• Relatív méret, Eltolás animációk.
• Ragadós fejlécek, Parallax a ScrollViewerrel. (Lásd: Meglévő ScrollViewer-szolgáltatások továbbfejlesztése.)
• Pontok rögzítése InertiaModifiers és InteractionTracker használatával. (Lásd: Illesztési pontok létrehozása tehetetlenségi módosítókkal.)

Az ExpressionAnimations használatakor érdemes néhány dolgot megemlíteni:

• Soha véget nem ér – a KeyFrameAnimation testvérével ellentétben a kifejezéseknek nincs véges időtartama. Mivel a kifejezések matematikai kapcsolatok, ezek olyan animációk, amelyek folyamatosan "futnak". Ha úgy dönt, leállíthatja ezeket az animációkat.
• Futó, de nem mindig kiértékelt – a teljesítmény mindig aggodalomra ad okot a folyamatosan futó animációk esetén, mivel azok nem mindig kerülnek kiértékelésre. Nem kell azonban aggódnia, a rendszer elég okos ahhoz, hogy a kifejezés csak akkor értékelje újra, ha valamelyik bemenete vagy paramétere módosult.
• Feloldás a megfelelő objektumtípusra – Mivel a kifejezések matematikai kapcsolatok, fontos meggyőződni arról, hogy a Kifejezés definiáló egyenlete az animáció által megcélzott tulajdonság azonos típusára lesz feloldva. Ha például az eltolást animálja, a kifejezésnek vektor3 típusúra kell feloldania.

Kifejezés összetevői

Egy kifejezés matematikai kapcsolatának létrehozásakor több alapvető összetevő is létezik:

• Paraméterek – állandó értékeket vagy más kompozíciós objektumokra mutató hivatkozásokat képviselő értékek.
• Matematikai operátorok – a tipikus matematikai operátorok plusz(+), mínusz(-), szorzás(*), osztás(/), amelyek paraméterek összeillesztéséhez egyenletet alkotnak. Olyan feltételes operátorokat is tartalmaz, mint a nagyobb(>), equal(==), ternáris operátor (feltétel ? ifTrue : ifFalse) stb.
• Matematikai függvények – matematikai függvények/billentyűparancsok a System.Numerics alapján. A támogatott függvények teljes listáját lásd: ExpressionAnimation.

A kifejezések olyan kulcsszavakat is támogatnak, amelyek csak az ExpressionAnimation rendszeren belül eltérő jelentéssel rendelkeznek. Ezek (a matematikai függvények teljes listájával együtt) szerepelnek a ExpressionAnimation dokumentációjában.

Kifejezések létrehozása az ExpressionBuilderrel

A WinUI-alkalmazásban kétféleképpen építheti ki a kifejezéseket:

1. Készítse el az egyenletet karakterláncként a hivatalos, nyilvános API-val.
2. Az egyenletet egy típusbiztos objektummodellben hozhatja létre a Windows Community Toolkitben található ExpressionBuilder eszközzel.

A dokumentum kedvéért kifejezéseinket Kifejezésbuilder használatával határozzuk meg.

Paraméterek

A paraméterek alkotják a kifejezés magját. Kétféle paraméter létezik:

• Állandók: ezek a típusú System.Numeric változókat képviselő paraméterek. Ezek a paraméterek az animáció indításakor egyszer rendelik hozzá az értékeiket.
• Hivatkozások: ezek olyan paraméterek, amelyek a CompositionObjectsre mutató hivatkozásokat jelölik – ezek a paraméterek egy animáció elindítása után folyamatosan frissítik az értékeiket.

A kifejezések kimenetének dinamikus változását általában a hivatkozások képezik. Ahogy ezek a hivatkozások változnak, a kifejezés kimenete ennek megfelelően változik. Ha sztringekkel hozza létre a kifejezést, vagy egy templatáló forgatókönyvben használja őket (a Kifejezés használatával több CompositionObjects-et céloz meg), el kell neveznie és meg kell adnia a paraméterek értékeit. További információt a Példa szakaszban talál.

A Kulcskocka Animációk használata

A kifejezések a KeyFrameAnimations használatával is használhatók. Ezekben az esetekben kifejezést szeretne használni a KeyFrame értékének meghatározására egy adott időpontban – ezeket a KeyFrame-eket ExpressionKeyFrame-eknek nevezzük.

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

A ExpressionAnimationstől eltérően azonban a Rendszer csak egyszer értékeli ki a ExpressionKeyFrame-eket a KeyFrameAnimation indításakor. Ne feledje, hogy nem a KeyFrame értékeként adja át a ExpressionAnimation értéket, hanem egy sztringet (vagy ExpressionNode-ot, ha ExpressionBuildert használ).

Example

Most tekintsünk át egy példát a Kifejezések, pontosabban a Windows felhasználói felület mintagyűjteményéből származó PropertySet-minta használatára. Megvizsgáljuk a kék golyó pályájának viselkedését kezelő kifejezést.

A teljes élményhez három összetevő áll rendelkezésre:

1. A KeyFrameAnimation a vörös golyó Y eltolását animálja.
2. Egy PropertySet, amelynek Rotation tulajdonsága segít az orbitális mozgást, és amelyet egy másik KeyFrameAnimation animál.
3. Egy ExpressionAnimation, amely a kék golyó eltolását a vörös golyó eltolásának és a forgási tulajdonságnak a figyelembevételével irányítja, hogy tökéletes pályát tartson fenn.

A 3. számban definiált ExpressionAnimation kifejezésre összpontosítunk. A Kifejezés létrehozásához az ExpressionBuilder osztályokat is használni fogjuk. A folyamat sztringeken keresztüli létrehozásához használt kód egy példánya a végén jelenik meg.

Ebben az egyenletben két tulajdonságra kell hivatkoznia a PropertySet tulajdonságaira; az egyik a középpont eltolása, a másik pedig a forgatás.

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

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

Ezután meg kell határoznia azt a Vector3-összetevőt, amely a tényleges keringési forgást adja meg.

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

Megjegyzés:

EF WinUI kifejezésszerkesztő könyvtárában a Kifejezésfüggvények definiálásához használt rövid "using" jelölés.

Végül egyesítse ezeket az összetevőket, és hivatkozzon a Red Ball helyzetére a matematikai kapcsolat meghatározásához.

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

Hipotetikus helyzetben mi a teendő, ha ugyanazt a kifejezést szeretné használni, de két másik vizualizációval, vagyis két keringő körrel. A CompositionAnimations használatával újra használhatja az animációt, és több CompositionObjects-et célozhat meg. Az egyetlen dolog, amit módosítania kell, amikor ezt a kifejezést a további pályás esetre használja, az a Visual-ra mutató hivatkozás. Ezt a templatingot hívjuk.

Ebben az esetben módosítja a korábban létrehozott kifejezést. A CompositionObjectre mutató hivatkozás "lekérése" helyett hozzon létre egy nevet tartalmazó hivatkozást, majd rendeljen hozzá különböző értékeket:

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

Itt látható a kód, ha a kifejezést sztringekkel definiálta a nyilvános API-val.

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