Illesztési pontok létrehozása tehetetlenségi módosítókkal

Ebben a cikkben részletesebben bemutatjuk, hogyan használható az InteractionTracker InertiaModifier funkciója egy adott ponthoz illeszkedő mozgásélmények létrehozásához.

Előfeltételek

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

• Bemenetalapú animációk
• Egyedi manipulációs élmények az InteractionTracker-rel
• Kapcsolaton alapuló animációk

Mik azok a illesztési pontok, és miért hasznosak?

Egyéni manipulációs élmények létrehozásakor néha hasznos, ha speciális pozíciópontokat a görgethető/nagyítható vásznon belül, ahol az InteractionTracker mindig pihenni fog. Gyakran ezeket nevezik illesztési pontoknak.

Figyelje meg az alábbi példában, hogy a görgetés hogyan hagyhatja kényelmetlenül a felhasználói felületet a különböző képek között:

Ha illesztési pontokat ad hozzá, amikor leállítja a képek közötti görgetést, azok egy meghatározott helyre illeszkednek. A rögzítési pontok használatával a képek görgetési élménye sokkal tisztább és reagálókészebb lesz.

InteractionTracker és InertiaModifiers

Az InteractionTrackerrel testre szabott manipulációs élmények létrehozásakor inertiaModifiers használatával hozhat létre illesztőpont-mozgási élményt. Az InertiaModifiers lényegében azt határozza meg, hogy az InteractionTracker hol vagy hogyan éri el a célhelyét az Inercia állapotba való belépéskor. Az InertiaModifiers alkalmazásával befolyásolhatja az InteractionTracker X vagy Y pozícióját vagy méretezési tulajdonságait.

Az InertiaModifiersnek 3 típusa van:

• InteractionTrackerInertiaRestingValue – az interakció vagy programozott sebesség utáni végső nyugalmi pozíció módosításának módja. Egy előre definiált mozgás az InteractionTrackert fogja erre a pozícióra vinni.
• InteractionTrackerInertiaMotion – egy adott mozgás meghatározásának módja, az InteractionTracker egy interakció vagy programozott sebesség után fog végrehajtani. A végső pozíció ebből az indítványból származik.
• InteractionTrackerInertiaNaturalMotion – a végső nyughely meghatározásának módja interakció vagy programozott sebesség után, de egy fizikaalapú animációval (NaturalMotionAnimation).

Az Inercia megadásakor az InteractionTracker kiértékeli a hozzá rendelt inertiaModifiereket, és meghatározza, hogy ezek közül melyik érvényes-e. Ez azt jelenti, hogy több InertiaModifiert is létrehozhat és hozzárendelhet egy InteractionTrackerhez, de mindegyik definiálásakor a következőket kell tennie:

1. A feltétel definiálása – egy kifejezés, amely meghatározza a feltételes utasítást, amikor az adott InertiaModifier-nek létre kell vennie. Ehhez gyakran meg kell néznie az InteractionTracker NaturalRestingPosition -t (az alapértelmezett tehetetlenséget megadott célhelyet).
2. Határozza meg a RestingValue/Motion/NaturalMotion kifejezéseket – adja meg azt a tényleges Resting Value Expression, Motion Expression vagy NaturalMotionAnimation kifejezést, ami a feltétel teljesülésekor érvénybe lép.

Megjegyzés:

Az InertiaModifiers feltételeleme csak egyszer lesz kiértékelve, amikor az InteractionTracker inerciába lép. Azonban csak az InertiaMotion esetében történik meg a mozgáskifejezés minden egyes keretben való kiértékelése annak a módosítónak, amelynek feltétele igaz.

példa

Most nézzük meg, hogyan használhatja az InertiaModifiers modult néhány rögzítési pont élmény létrehozásához, hogy újraalkothassa a képek görgetéskor látható vásznát. Ebben a példában minden manipuláció célja, hogy egyetlen képen haladjon át – ezt gyakran egyetlen kötelező illesztési pontnak nevezik.

Kezdjük az InteractionTracker, a VisualInteractionSource és az InteractionTracker pozícióját használó kifejezés beállításával.

private void SetupInput()
{
    _tracker = InteractionTracker.Create(_compositor);
    _tracker.MinPosition = new Vector3(0f);
    _tracker.MaxPosition = new Vector3(3000f);

    _source = VisualInteractionSource.Create(_root);
    _source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    _source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;
    _tracker.InteractionSources.Add(_source);

    var scrollExp = _compositor.CreateExpressionAnimation("-tracker.Position.Y");
    scrollExp.SetReferenceParameter("tracker", _tracker);
    ElementCompositionPreview.GetElementVisual(scrollPanel).StartAnimation("Offset.Y", scrollExp);
}

Következő lépésként, mivel a kötelező illesztési pont viselkedése vagy felfelé, vagy lefelé mozgatja a tartalmat, két különböző tehetetlenségi módosítóra van szüksége: az egyik a görgethető tartalom felfelé mozgatására, a másik pedig a lefelé mozgatására.

// Snap-Point to move the content up
var snapUpModifier = InteractionTrackerInertiaRestingValue.Create(_compositor);
// Snap-Point to move the content down
var snapDownModifier = InteractionTrackerInertiaRestingValue.Create(_compositor);

Annak megállapítására, hogy felfelé vagy lefelé kell-e igazítani, az dönt, hogy az InteractionTracker melyik irányba landolna természetesen az illesztési távolsághoz – vagyis az illesztési helyek közötti távolsághoz – viszonyítva. Ha a félidőn túl van, akkor pattintson lefelé, különben felfelé. (Ebben a példában a illesztési távolságot egy PropertySetben tárolja)

// Is NaturalRestingPosition less than the halfway point between Snap Points?
snapUpModifier.Condition = _compositor.CreateExpressionAnimation(
"this.Target.NaturalRestingPosition.y < (this.StartingValue - " + 
"mod(this.StartingValue, prop.snapDistance) + prop.snapDistance / 2)");
snapUpModifier.Condition.SetReferenceParameter("prop", _propSet);
// Is NaturalRestingPosition greater than the halfway point between Snap Points?
snapDownModifier.Condition = _compositor.CreateExpressionAnimation(
"this.Target.NaturalRestingPosition.y >= (this.StartingValue - " + 
"mod(this.StartingValue, prop.snapDistance) + prop.snapDistance / 2)");
snapDownModifier.Condition.SetReferenceParameter("prop", _propSet);

Ez a diagram vizuális leírást ad a folyamatban lévő logikáról:

Most már csak meg kell határoznia az egyes InertiaModifierek nyugalmi értékeit: vagy állítsa az InteractionTracker pozícióját az előző rögzítési pontra, vagy a következőre.

snapUpModifier.RestingValue = _compositor.CreateExpressionAnimation(
"this.StartingValue - mod(this.StartingValue, prop.snapDistance)");
snapUpModifier.RestingValue.SetReferenceParameter("prop", _propSet);
snapDownModifier.RestingValue = _compositor.CreateExpressionAnimation(
"this.StartingValue + prop.snapDistance - mod(this.StartingValue, " + 
"prop.snapDistance)");
snapDownModifier.RestingValue.SetReferenceParameter("prop", _propSet);

Végül adja hozzá az InertiaModifiers elemet az InteractionTrackerhez. Most, amikor az InteractionTracker belép az InertiaState állapotba, ellenőrzi az InertiaModifiers feltételeit, hogy módosítani kell-e a pozícióját.

var modifiers = new InteractionTrackerInertiaRestingValue[] { 
snapUpModifier, snapDownModifier };
_tracker.ConfigurePositionYInertiaModifiers(modifiers);