InteractionTracker ile özel düzenleme deneyimleri

Bu makalede, özel işleme deneyimleri oluşturmak için InteractionTracker'ın nasıl kullanılacağını göstereceğiz.

Önkoşullar

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

• Giriş temelli animasyonlar
• İlişki tabanlı animasyonlar

Özel işleme deneyimleri neden oluşturulsun?

Çoğu durumda, önceden oluşturulmuş işleme denetimlerini kullanmak kullanıcı arabirimi deneyimleri oluşturmak için yeterlidir. Peki ortak denetimlerden ayrım yapmak isterseniz ne olacak? Giriş temelli belirli bir deneyim oluşturmak veya geleneksel işleme hareketinin yeterli olmadığı bir kullanıcı arabirimine sahip olmak istiyorsanız ne olur? Özel deneyimler oluşturma burada devreye girer. Uygulama geliştiricilerinin ve tasarımcılarının daha yaratıcı olmasını sağlar ve markalarını ve özel tasarım dillerini daha iyi örnekleyen hareket deneyimlerini hayata geçirir. Baştan sona, bir işleme deneyimini tamamen özelleştirmek için doğru yapı taşları kümesine erişim sağlanır. Hareketin ekranda ve ekrandan parmağınızla nasıl yanıt vermesi gerektiğinden yerleştirme noktalarına ve giriş zinciri oluşturmaya kadar her şeyi ayarlayabilirsiniz.

Aşağıda, özel bir işleme deneyimi oluşturma zamanları ile ilgili bazı yaygın örnekler verilmiştir:

• Özelleştirilmiş kaydırma, silme/sonlandırma davranışı ekleme
• Giriş temelli efektler (kaydırma, içeriğin bulanıklaştırmasına neden olur)
• Özelleştirilmiş kontrol hareketleriyle Özelleştirilmiş Denetimler (özelleştirilmiş ListView, ScrollViewer vb.)

InteractionTracker neden kullanılır?

InteractionTracker, WinUI ve Windows Uygulama SDK'sı uygulamaları için Microsoft.UI.Composition.Interactions ad alanında kullanılabilir. InteractionTracker şunları sağlar:

• Tam Esneklik – bir işleme deneyiminin her yönünü özelleştirebilmenizi ve uyarlayabilmenizi istiyoruz; özellikle, giriş sırasında veya buna yanıt olarak gerçekleşen tam hareketler. InteractionTracker ile özel bir işleme deneyimi oluştururken, ihtiyacınız olan tüm düğmeler elinizin altındadır.
• Sorunsuz Performans – işleme deneyimlerindeki zorluklardan biri, performanslarının kullanıcı arabirimi iş parçacığına bağımlı olmasıdır. Bu, kullanıcı arabirimi meşgul olduğunda herhangi bir işleme deneyimini olumsuz etkileyebilir. InteractionTracker, 60 FPS'de bağımsız bir iş parçacığı üzerinde çalışan yeni Animasyon motorunu kullanacak şekilde oluşturulmuş ve bu da sorunsuz hareketle sonuçlanır.

Genel Bakış: InteractionTracker

Özel düzenleme deneyimleri oluştururken etkileşimde olduğunuz iki birincil bileşen vardır. Öncelikle bunları ele alacağız:

• InteractionTracker : Özellikleri etkin kullanıcı girişi veya doğrudan güncelleştirmeler ve animasyonlar tarafından yönlendirilen bir durum makinesini koruyan temel nesne. Daha sonra özel işleme hareketini oluşturmak için CompositionAnimation ile bağlanması hedeflenmektedir.
• VisualInteractionSource – Girişin InteractionTracker'a ne zaman ve hangi koşullar altında gönderileceğini tanımlayan tamamlayıcı bir nesnedir. Hem İsabet testi için kullanılan CompositionVisual'ı hem de diğer giriş yapılandırma özelliklerini tanımlar.

Durum makinesi olarak, InteractionTracker'ın özellikleri aşağıdakilerden herhangi biri tarafından yönlendirilebilir:

• Doğrudan Kullanıcı Etkileşimi – son kullanıcı VisualInteractionSource çarpma testi bölgesinde doğrudan etkileşimde bulunuyor
• Eylemsizlik – programlı hızdan veya kullanıcı hareketinden, InteractionTracker'ın özellikleri atalet eğrisi altında animasyon oluşturur
• CustomAnimation – InteractionTracker özelliğini doğrudan hedefleyen özel animasyon

InteractionTracker İzleyici Durum Makinesi

Daha önce belirtildiği gibi, InteractionTracker 4 durumlu bir durum makinesidir ve her biri diğer dört durumdan herhangi birine geçiş yapabilir. (InteractionTracker'ın bu durumlar arasında geçişleri hakkında daha fazla bilgi için InteractionTracker sınıfı belgelerine bakın.)

Devlet	Açıklama
Idle	Etkin, sürüş girişleri veya animasyonları yok
Etkileşim	Etkin kullanıcı girişi algılandı
Eylemsizlik	Aktif giriş veya programlı hızdan kaynaklanan aktif hareket
ÖzelAnimasyon	Özel animasyondan kaynaklanan etkin hareket

InteractionTracker'ın durumunun değiştiği her durumda, dinleyebileceğiniz bir olay (veya geri arama) oluşturulur. Bu olayları dinleyebilmeniz için IInteractionTrackerOwner arabirimini uygulaması ve CreateWithOwner yöntemiyle InteractionTracker nesnesini oluşturması gerekir. Aşağıdaki diyagram, farklı olayların ne zaman tetiklendiğini de gösterir.

VisualInteractionSource'u Kullanma

InteractionTracker'ın Giriş tarafından yönlendirilmesi için, buna bir VisualInteractionSource (VIS) bağlamanız gerekir. VIS, aşağıdakileri tanımlamak için CompositionVisual kullanılarak bir tamamlayıcı nesne olarak oluşturulur:

1. Girişin izleneceği isabet testi bölgesi ve koordinat alanında tespit edilen hareketler
2. Algılanacak ve yönlendirilecek girişin yapılandırmaları şunlardır:
   • Algılanabilir hareketler: Konum X ve Y (yatay ve dikey kaydırma), Ölçek (sıkıştırma)
   • Eylemsizlik
   • Raylar ve Zincirleme
   • Yeniden Yönlendirme Modları: Hangi giriş verileri otomatik olarak InteractionTracker'a yeniden yönlendirilir?

Uyarı

VisualInteractionSource, bir Görselin isabet testi konumu ve koordinat alanı temelinde oluşturulduğundan, hareket halinde olacak veya konum değiştirecek bir Görsel kullanılmaması önerilir.

Uyarı

Birden çok isabet testi bölgesi varsa, aynı InteractionTracker ile birden çok VisualInteractionSource örneği kullanabilirsiniz. Ancak en yaygın durum yalnızca bir VIS kullanmaktır.

VisualInteractionSource, farklı modalitelerden (dokunma, PTP, Kalem) gelen giriş verilerinin InteractionTracker'a yönlendirilmesinden de sorumludur. Bu davranış ManipulationRedirectionMode özelliği tarafından tanımlanır. Varsayılan olarak, tüm İşaretçi girişi işlemci iş parçacığına gönderilir ve Hassas Dokunmatik Yüzey girişi VisualInteractionSource ile InteractionTracker'a iletilir.

Bu nedenle, VisualInteractionSource ve InteractionTracker aracılığıyla bir işlemeyi yönlendirmek için Dokunma ve Kalem 'in (Creators Update) olmasını istiyorsanız, VisualInteractionSource.TryRedirectForManipulation yöntemini çağırmanız gerekir. Bir XAML uygulamasından aşağıdaki kısa kod parçacığında, en üstteki UIElement olan Grid'de bir dokunma olayı gerçekleştiğinde yöntem çağrılır.

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

ExpressionAnimations ile entegrasyon

Bir düzenleme deneyimi sağlamak için InteractionTracker'ı kullanırken öncelikle Ölçek ve Konum özellikleriyle etkileşim kurarsınız. Diğer CompositionObject özellikleri gibi, bu özellikler hem hedeflenebilir hem de çoğu zaman ExpressionAnimations olan bir CompositionAnimation içerisinde referans alınabilir.

İfade içinde InteractionTracker'ı kullanmak için trackerdaki Position (veya Scale) özelliğine, aşağıdaki örnekte olduğu gibi başvurun. Daha önce açıklanan koşullardan herhangi biri nedeniyle InteractionTracker özelliği değiştirildiğinden, İfadenin çıkışı da değişir.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

Uyarı

Bir İfadede InteractionTracker'ın konumuna başvururken, sonuçta elde edilen İfadenin doğru yönde ilerlemesi için değeri yok saymalısınız. Bunun nedeni, InteractionTracker'ın bir graftaki kaynağından ilerlemesi ve InteractionTracker'ın ilerlemesini kaynağından uzaklık gibi "gerçek dünya" koordinatlarında düşünmenize olanak sağlamasıdır.

Başlayın

Özel işleme deneyimleri oluşturmak üzere InteractionTracker'ı kullanmaya başlamak için:

1. InteractionTracker.Create veya InteractionTracker.CreateWithOwner kullanarak InteractionTracker nesnenizi oluşturun.
   • (CreateWithOwner kullanıyorsanız, IInteractionTrackerOwner arabirimini uyguladığınıza emin olun.)
2. Yeni oluşturduğunuz InteractionTracker'ın En Düşük ve En Yüksek konumunu ayarlayın.
3. CompositionVisual ile VisualInteractionSource'unuzu oluşturun.
   • Geçirdiğiniz görselin sıfır olmayan bir boyuta sahip olduğundan emin olun. Aksi takdirde, hedef testi doğru şekilde yapılmaz.
4. VisualInteractionSource'un özelliklerini ayarlayın.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Raylar ve Zincirleme
5. InteractionTracker.InteractionSources.Add kullanarak VisualInteractionSource'ı InteractionTracker'a ekleyin.
6. Dokunma ve Kalem girişi algılandığında tryRedirectForManipulation ayarlayın.
   • XAML için bu genellikle UIElement'in PointerPressed olayında yapılır.
7. InteractionTracker'ın konumuna başvuran ve CompositionObject'in özelliğini hedefleyen bir ExpressionAnimation oluşturun.

#1 – 5'in çalıştığını gösteren kısa bir kod parçacığı aşağıdadır:

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

InteractionTracker'ın daha gelişmiş kullanımları için aşağıdaki makalelere bakın:

• InertiaModifiers ile yakalama noktaları oluşturma
• SourceModifiers ile aşağı çekerek yenileme