Eylemsizlik değiştiricileri ile tutturma noktaları oluşturma

Bu makalede, bir WinUI uygulamasında belirli bir noktaya uyum sağlayan hareket deneyimleri oluşturmak için InteractionTracker'ın InertiaModifier özelliğinin nasıl kullanılacağını detaylı bir şekilde inceleyeceğiz.

WinUI uygulamalarında InteractionTracker ve ilgili eylemsizlik değiştirici türleri ad alanındadır Microsoft.UI.Composition.Interactions .

Önkoşullar

Burada, bu makalelerde ele alınan kavramlar hakkında bilgi sahibi olduğunuzu varsayıyoruz:

• Giriş temelli animasyonlar
• InteractionTracker ile özel düzenleme deneyimleri
• İlişki tabanlı animasyonlar

Yakalama noktaları nedir ve neden yararlıdır?

Özel manipülasyon deneyimleri oluştururken bazen InteractionTracker'ın her zaman duracağı kaydırılabilir/yakınlaştırılabilir tuval içinde özel konum noktaları oluşturmak yararlı olabilir. Bunlar genellikle tutturma noktaları olarak adlandırılır.

Aşağıdaki örnekte kaydırmanın kullanıcı arabirimini farklı görüntüler arasında garip bir konumda nasıl bırakabileceğine dikkat edin:

Snap noktaları eklerseniz, resimler arasında kaydırmayı durdurduğunuzda, bunlar belirtilen konumuna oturtulur. Tutma noktaları sayesinde görüntüler arasında kaydırma deneyimi çok daha temiz ve daha duyarlı hale gelir.

InteractionTracker ve InertiaModifiers

InteractionTracker ile özelleştirilmiş işleme deneyimleri oluştururken, InertiaModifiers kullanarak snap point motion deneyimleri oluşturabilirsiniz. InertiaModifiers temelde, Eylemsizlik durumuna girerken InteractionTracker'ın hedefine nerede veya nasıl ulaştığını tanımlamanın bir yoludur. InteractionTracker'ın X veya Y konumunu veya Ölçek özelliklerini etkilemek için InertiaModifiers uygulayabilirsiniz.

3 tür InertiaModifier vardır:

• InteractionTrackerInertiaRestingValue, etkileşim veya programlı bir hızdan sonra nihai dinlenme konumunu değiştirmenin bir yoludur. Önceden tanımlanmış bir hareket, InteractionTracker'ı bu konuma götürür.
• InteractionTrackerInertiaMotion – InteractionTracker'ın bir etkileşim veya programlı bir hızdan sonra belirli bir hareketi gerçekleştirmesi için bir yöntemdir. Son konum bu hareketten türetilecektir.
• InteractionTrackerInertiaNaturalMotion, bir etkileşim veya programlı hızdan sonra ancak fizik tabanlı animasyonla (NaturalMotionAnimation) son dinlenme konumunu tanımlamanın bir yoludur.

Inertia'ya girerken InteractionTracker, kendisine atanan InertiaModifier'ların her birini değerlendirir ve bunlardan herhangi birinin geçerli olup olmadığını belirler. Bu, bir InteractionTracker'a birden çok InertiaModifier oluşturabileceğiniz ve atayabileceğiniz anlamına gelir. Ancak, her birini tanımlarken aşağıdakileri yapmanız gerekir:

1. Koşulu Tanımla – bu belirli InertiaModifier'ın gerçekleşmesi gerektiğinde koşullu ifadeyi tanımlayan bir ifade. Bunun için genellikle InteractionTracker'ın NaturalRestingPosition (varsayılan Eylemsizlik olarak verilen hedef) konusuna bakılması gerekir.
2. RestingValue/Motion/NaturalMotion'ı tanımlayın: Koşul karşılandığında gerçekleşen asıl “Resting Value Expression”, “Motion Expression” veya “NaturalMotionAnimation” ifadesini tanımlayın.

Uyarı

InertiaModifiers'ın koşul yönü, InteractionTracker Inertia'ya girdiğinde yalnızca bir kez değerlendirilir. Ancak, yalnızca "InertiaMotion" için, hareket ifadesi koşulu doğru olan değiştirici için her karede değerlendirilir.

Example

Şimdi inertiaModifiers'ı kullanarak resimlerin kaydırma tuvalini yeniden oluşturmak için bazı snap point deneyimleri oluşturabileceğinize bakalım. Bu örnekte, her işlem tek bir görüntüde hareket etmeye yönelik tasarlanmıştır; bu genellikle Tek Zorunlu Yakalama Noktaları olarak adlandırılır.

İlk olarak InteractionTracker, VisualInteractionSource ve InteractionTracker'ın konumundan yararlanacak İfade'yi ayarlayalım.

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

Ardından, Tek Zorunlu Tutturma Noktası davranışı içeriği yukarı veya aşağı taşıyacağından iki farklı eylemsizlik değiştiricisine ihtiyacınız olacaktır: biri kaydırılabilir içeriği yukarı, diğeri de aşağı taşır.

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

InteractionTracker'ın doğal olarak tutturma mesafesine (tutturma konumları arasındaki uzaklık) göre nereye inmesi gerektiği belirlenerek, yukarı veya aşağı yaslamaya karar verilir. Yarı noktayı geçtiyseniz, aşağı doğru tutturun, aksi halde yukarı doğru tutturun. (Bu örnekte, yakalama mesafesini bir PropertySet içinde depolayacaksınız)

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

Bu diyagram, gerçekleşen mantığa görsel bir açıklama sağlar:

Şimdi her InertiaModifier için Resting Değerlerini tanımlamanız yeterlidir: InteractionTracker'ın konumunu önceki tutturma konumuna veya sonrakine taşıyın.

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

Son olarak, InertiaModifiers'ı InteractionTracker'a ekleyin. Artık InteractionTracker InertiaState değerini girdiğinde, konumunun değiştirilmesi gerekip gerekmediğini görmek için InertiaModifiers koşullarınızı denetler.

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