Természetes mozgásanimációk

Ez a cikk rövid áttekintést nyújt a NaturalMotionAnimation térről, és arról, hogyan gondolkodhat elméletileg az ilyen típusú animációk felhasználói felületen való használatáról.

A mozgás ismerőssé és természetessé tétele

A nagyszerű alkalmazások olyan élményeket hoznak létre, amelyek rögzítik és megőrzik a felhasználói figyelmet, és segítenek a felhasználóknak a feladatokon végigvezetni őket. A mozgás az a fő különbségi tényező, amely elválasztja a felhasználói felületet a felhasználói élménytől, és kapcsolatot hoz létre a felhasználók és az általuk kommunikáló alkalmazás között. Minél jobb a kapcsolat, annál nagyobb az érdeklődés és a végfelhasználók elégedettsége.

Az egyik módja annak, ahogyan a mozgás segíthet ezt az összekapcsolódást megteremteni, az az, hogy olyan élményeket hoz létre, amelyek ismerősnek tűnnek és ismerősnek érződnek a felhasználók számára. A felhasználók öntudatlan várakozással tekintenek arra, hogyan érzékelik a valós élettapasztalatokon alapuló mozgást. Látjuk, hogyan csúsznak az objektumok a padlón, leesnek az asztalról, egymásba pattognak, és egy rugóval oszcillálódnak. Mozgás, amely ezt az elvárást kihasználja azáltal, hogy a valós fizika alapján működik, természetesebben néz ki és érződik a szemünkben. A mozgás természetesebbé és interaktívabbá válik, de ami még fontosabb, az egész élmény emlékezetesebbé és élvezetesebbé válik.

A nettó eredmény az alkalmazással való nagyobb felhasználói elkötelezettség és megőrzés.

Kiegyensúlyozás szabályozása és dinamizmusa

A hagyományos felhasználói felületen a KeyFrameAnimations az elsődleges módja a mozgás leírásának. A KeyFrames a lehető legnagyobb ellenőrzést biztosította a tervezők és fejlesztők számára a kezdés, a befejezés és az interpoláció meghatározásához. Bár ez sok esetben nagyon hasznos, a KeyFrame animációk nem túl dinamikusak; a mozgás nem adaptív, és bármilyen feltétel mellett ugyanúgy néz ki.

A spektrum másik végén vannak szimulációk, amelyeket gyakran láthatunk játék- és fizikamotorokban. Ezek a szolgáltatások gyakran a legéletszerűbbek és legdinamikusabbak, amelyekkel a felhasználók interakcióba lépnek – ez pedig azt a hangulatot és véletlenszerűséget teremti, amelyet a felhasználók nap mint nap látnak. Bár így a mozgás élettelibb és dinamikusabb, a tervezőknek és fejlesztőknek kevesebb irányítási lehetőségük van, ami megnehezíti a hagyományos felhasználói felületbe való integrálást.

NaturalMotionAnimation léteznek, hogy áthidalják ezt a szakadékot – lehetővé téve a fontos animációs elemek, mint a kezdés/befejezés vezérlésének egyensúlyát, miközben fenntartják a mozgást, ami természetesnek és dinamikusnak tűnik és hat.

Megjegyzés:

A NaturalMotionAnimations nem a KeyFrame-animációk helyettesítésére szolgál – a Fluent tervezési nyelvben továbbra is vannak olyan helyek, ahol a KeyFrame-ek használata javasolt. A NaturalMotionAnimations olyan helyeken használható, ahol mozgásra van szükség, de a KeyFrame animációk nem elég dinamikusak.

NaturalMotionAnimations használata

A WinUI-ban és a Windows App SDK-ban természetes mozgásélményhez férhet hozzá: tavaszi animációkhoz. A spring animációk részletesebb ismertetését a Spring animációkban találja.

Ez a mozgástípus az új NaturalMotionAnimation használatával érhető el – egy új animációs típus, amely arra összpontosít, hogy a fejlesztők ismerősebb és természetesebb mozgást építsenek a felhasználói felületükre, az irányítás és a dinamizmus egyensúlyával. A következő képességeket teszik elérhetővé:

• Adja meg a kezdő és a záró értéket.
• Az InitialVelocity definiálása és összekapcsolása a bemenettel az InteractionTrackeren keresztül.
• Mozgásspecifikus tulajdonságok definiálása (például a rugóknál a DampingRatio).)

Általános képlet az első lépésekhez:

1. Hozza létre a NaturalMotionAnimation animációt a Compositor segítségével a Létrehozás metódusok egyikével.
2. Határozza meg az animáció tulajdonságait.
3. Adja át a NaturalMotionAnimation objektumot paraméterként egy CompositionObjectből induló StartAnimation hívásnak.
   • Vagy állítsa be az InteractionTracker InertiaModifier Mozgás tulajdonságát.

Egy egyszerű példa a rugós NaturalMotionAnimation használatára, hogy egy vizuális elem egy új X eltolás helyre "ugorjon".

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);