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 a WinUI-alkalmazások egy adott pontjára illesztő mozgásélmények létrehozásához.

A WinUI-alkalmazásokban InteractionTracker és a kapcsolódó tehetetlenségi módosító típusok a Microsoft.UI.Composition.Interactions névtérben találhatók.

Előfeltételek

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

• Bemenetalapú animációk
• Egyéni manipulációs műveletek az InteractionTrackerrel
• Relációs 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 hoz létre a görgethető/nagyítható vásznon belül, amelyeknél az InteractionTracker mindig pihenni fog. Ezeket gyakran illesztési pontoknak nevezik.

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 hozzáadja a rögzítési pontokat, amikor megállítja a görgetést a képek között, azok egy meghatározott helyre rögzülnek. A illesztési pontok használatával sokkal tisztább és rugalmasabb lehet a képek görgetése.

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 – a végső resting pozíció módosításának módja interakció vagy programozott sebesség után. 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. Az egyes elemek meghatározásakor azonban 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 értékeit – specifikálja a tényleges nyugalmi érték kifejezést (Resting Value Expression), a mozgás kifejezést (Motion Expression) vagy a természetes mozgás animációt (NaturalMotionAnimation), amely a feltétel teljesülésekor zajlik le.

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 van az a helyzet, amikor a mozgáskifejezés minden képkockához ki van értékelve annak a módosítónak, amelynek feltétele igaz.

Example

Most nézzük meg, hogyan használhatja az InertiaModifierst néhány illesztési pont létrehozásához a képek görgetővászonjának újbóli létrehozásához. Ebben a példában minden manipuláció célja, hogy potenciálisan egy képen keresztül mozduljon el – ezt gyakran nevezik egyetlen kötelező csomópontnak.

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

A következő lépésben, mivel egy kötelező illesztési pont működése vagy felfelé, vagy lefelé mozgatja a tartalmat, két különböző tehetetlenségi módosítókra van szüksége: az egyik, amely felfelé mozgatja a görgethető tartalmat, és a másik, amely lefelé mozgatja azt.

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

Az, hogy felfelé vagy lefelé szeretne-e illeszteni, az az alapján van meghatározva, hogy az InteractionTracker természetesen a illesztési távolsághoz viszonyítva landolt-e – a illesztési helyek közötti távolság alapján. Ha a középpontot átlépte, 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 InertiaModifier nyugalmi értékeit: akár áthelyezheti az InteractionTracker pozícióját az előző illesztési pozícióba, akár 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-be, ellenőrzi az InertiaModifiers feltételeit, hogy ellenőrizze, módosítani kell-e a pozícióját.

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