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

Bu makalede, belirli bir noktaya kitlenen hareket deneyimleri oluşturmak için InteractionTracker'ın InertiaModifier özelliğinin nasıl kullanılacağını daha ayrıntılı bir şekilde ele alacağız.

Önkoşullar

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

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

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

Özel düzenleme deneyimleri oluştururken, bazen InteractionTracker'ın daima duracağı kaydırılabilir/yakınlaştırılabilir tuval içinde özel noktaları oluşturmak yararlı olabilir. Bunlar genellikletutturma 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:

Eğer snap noktaları eklerseniz, resimler arasında kaydırmayı durdurduğunuzda, resimler belirtilen konuma "oturur". Tutturma noktaları sayesinde görüntüler arasında kaydırma deneyimi çok daha temiz ve daha hızlı yanıt verir.

Etkileşim İzleyici ve Eylemsizlik Değiştiriciler

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, bir etkileşim veya programlı bir hızdan sonra hareket sonundaki dinlenme konumunu değiştirmenin bir yoludur. Önceden tanımlanmış bir hareket, InteractionTracker'ı bu konuma götürür.
• InteractionTrackerInertiaMotion – Etkileşim veya programlı bir hızdan sonra InteractionTracker'ın gerçekleştireceği belirli bir hareketi tanımlamak için kullanılan 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 – InertiaModifier'ın bu özel durumda devreye girmesi gerektiğinde koşullu ifadeyi tanımlayan bir ifade. Bunun için genellikle InteractionTracker'ın NaturalRestingPosition (varsayılan Eylemsizlik olarak tanımlanan hedef) konusuna bakılması gerekir.
2. RestingValue/Motion/NaturalMotion tanımlayın: Koşul karşılandığında gerçekleşen gerçek Resting Value Expression, Motion Expression veya NaturalMotionAnimation değerini 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, koşulu doğru olan değiştirici için hareket ifadesi her karede değerlendirilir.

Örnek

Şimdi inertiaModifiers'ı kullanarak resimlerin kaydırma tuvalini yeniden oluşturmak için bazı snap point deneyimleri oluşturabileceğinize bakalım. Bu örnekte, her hareket, tek bir görüntüde ilerlemek üzere tasarlanmıştır; bu genellikle Tek Zorunlu Tutturma 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);

Yukarıya veya aşağıya sarma kararı, InteractionTracker'ın tutturma konumları arasındaki mesafeye göre doğal olarak nereye ulaşacağına bağlı olarak belirlenir. Yarı yolu geçtiyseniz, aşağı doğru bastırın, aksi takdirde yukarı doğru bastırın. (Bu örnekte, yakalama uzaklığını 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);