Bemenetalapú animációk

Ez a cikk bemutatja az InputAnimation API-t a WinUI- és a Windows App SDK-alkalmazásokban, és javasolja az ilyen típusú animációk használatát a felhasználói felületen.

Előfeltételek

Feltételezzük, hogy ismeri az alábbi cikkekben tárgyalt fogalmakat:

• Relációs animációk

Felhasználói interakciók által vezérelt zökkenőmentes mozgás

A Fluent Design nyelvben rendkívül fontos a végfelhasználók és az alkalmazások közötti interakció. Az alkalmazásoknak nem csak megfelelően kell kinézniük, hanem természetesen és dinamikusan kell válaszolniuk a felhasználóknak, akik velük kommunikálnak. Ez azt jelenti, hogy amikor egy ujját a képernyőn helyezik el, a felhasználói felületnek kecsesen reagálnia kell a változó bemeneti fokokra; a görgetésnek simanak kell lennie, és ragaszkodnia kell ahhoz, hogy egy ujj pásztázódjon a képernyőn.

A felhasználói bemenetekre dinamikusan és zökkenőmentesen reagáló felhasználói felület magasabb felhasználói aktivitást eredményez – A mozgás mostantól nem csak jól néz ki, de jól és természetesen érzi magát, amikor a felhasználók a különböző felhasználói felületi felületekkel kommunikálnak. Ez lehetővé teszi a végfelhasználók számára, hogy könnyebben csatlakozzanak az alkalmazáshoz, így a felhasználói élmény emlékezetesebb és élvezetesebb lesz.

Kibővül a puszta érintésen túl

Bár az érintés az egyik leggyakoribb felület, amelyet a végfelhasználók a felhasználói felület tartalmának manipulálására használnak, más bemeneti módokat is használnak, például az egeret és a tollat. Ezekben az esetekben fontos, hogy a végfelhasználók érzékeljék, hogy a felhasználói felület dinamikusan válaszol a bemenetükre, függetlenül attól, hogy milyen bemeneti modalitást használnak. A bemeneti vezérelt mozgásélmények tervezésekor figyelembe kell vennie a különböző bemeneti módokat.

Különféle bemeneti vezérelt mozgásélmények

Az InputAnimation tér számos különböző felületet biztosít a dinamikusan reagáló mozgás létrehozásához. A Windows App SDK-kompozíciós animációs rendszer többi részéhez hasonlóan ezek a bemenetalapú animációk egy független szálon működnek, amely segít hozzájárulni a dinamikus mozgásélményhez. Bizonyos esetekben azonban, amikor a felület kihasználja a meglévő XAML-vezérlőket és összetevőket, ezeknek a szolgáltatásoknak a részei továbbra is felhasználói felületi szálhoz kötöttek.

A dinamikus, bemenetalapú mozgásanimációk létrehozásakor három alapvető élményt hozhat létre:

1. A meglévő ScrollView-élmények továbbfejlesztése – lehetővé teszi az XAML ScrollViewer pozícióját a dinamikus animációs élmények eléréséhez.
2. Mutató pozícióalapú élmények – használja a kurzor pozícióját egy találattal tesztelt UIElement-en a dinamikus animációs élmények eléréséhez.
3. Egyéni manipulációs műveletek az InteractionTrackerrel – teljesen testre szabott, szálon kívüli manipulációs élményt hozhat létre az InteractionTrackerrel (például görgető-nagyítási vászon).

Meglévő ScrollViewer-szolgáltatások fejlesztése

A dinamikusabb szolgáltatások létrehozásának egyik gyakori módja, ha egy meglévő XAML ScrollViewer-vezérlőre épít. Ezekben az esetekben a ScrollViewer görgetési pozícióját használva további felhasználói felületi összetevőket hozhat létre, amelyek dinamikusabbá teszik az egyszerű görgetési élményt. Ilyenek például a ragadós és halvány fejlécek, valamint a parallaxis.

Az ilyen típusú szolgáltatások létrehozásakor egy általános képletet kell követni:

1. Acess az animáció irányítására szolgáló ScrollManipulationPropertySet-et az XAML ScrollViewerből, amelyet használni kíván.
   • Kész az ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement elem) API-n keresztül
   • Egy Translation nevű tulajdonságot tartalmazó CompositionPropertySet értéket ad vissza
2. Hozzon létre egy Composition ExpressionAnimation objektumot olyan egyenlettel, amely a Translation tulajdonságra hivatkozik.
3. Indítsa el az animációt a CompositionObject tulajdonságán.

A szolgáltatások kiépítéséről további információt a Meglévő ScrollViewer-szolgáltatások továbbfejlesztése című témakörben talál.

Mutató pozícióalapú élmények

A bemenettel kapcsolatos másik gyakori dinamikus élmény az animációk mozgatása egy mutató, például egérmutató pozíciója alapján. Ilyen helyzetekben a fejlesztők kihasználják a kurzor pozícióját, amikor egy XAML UIElement-ben végzik a hit-tesztet, így az olyan élmények, mint a Spotlight Reveal, létrehozhatóak.

Az ilyen típusú szolgáltatások létrehozásakor egy általános képletet kell követni:

1. A PointerPositionPropertySetet egy XAML UIElement elemről érheti el, amelyről tudni szeretné a kurzor pozícióját a tesztelés során.
   • Kész az ElementCompositionPreview.GetPointerPositionPropertySet(UIElement elem) API-n keresztül
   • Egy Position nevű tulajdonságot tartalmazó CompositionPropertySet értéket ad vissza
2. Hozzon létre egy CompositionExpressionAnimation típusú animációt egy olyan egyenlettel, amely a Position tulajdonságra hivatkozik.
3. Indítsa el az animációt a CompositionObject tulajdonságán.

Egyéni manipulációs műveletek az InteractionTrackerrel

Az XAML ScrollViewer használatának egyik kihívása, hogy a felhasználói felület szálához van kötve. Ennek eredményeképpen a görgetési és nagyítási élmény gyakran késlekedhet és akadozhat, ha a felhasználói felület szálán túl sok a teendő, és ez kellemetlen élményt nyújt. Emellett a ScrollViewer-élmény számos aspektusát nem lehet testre szabni. Az InteractionTracker úgy lett létrehozva, hogy mindkét problémát megoldhassa, és építőelemeket biztosítson a független szálon futó egyéni manipulációs élmények létrehozásához.

Az InteractionTrackerrel végzett élmények létrehozásakor egy általános képletet kell követnie:

1. Hozza létre az InteractionTracker objektumot, és határozza meg annak tulajdonságait.
2. Hozzon létre VisualInteractionSources-t minden olyan CompositionVisualhoz, amely rögzítenie kell az InteractionTracker által felhasznált bemenetet.
3. Hozzon létre egy összeállítási ExpressionAnimation-t egyenlettel, amely az InteractionTracker pozíció tulajdonságára hivatkozik.
4. Indítsa el az animációt egy kompozíciós vizualizáció azon tulajdonságán, amelyet az InteractionTracker szeretne vezérelni.