Giriş temelli animasyonlar

Bu makale, WinUI ve Windows Uygulama SDK'sı uygulamalarında InputAnimation API'sine giriş sağlar ve kullanıcı arabiriminizde bu tür animasyonların nasıl kullanılacağını önerir.

Önkoşullar

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

• İlişki tabanlı animasyonlar

Kullanıcı etkileşimlerinden kaynaklanan kesintisiz hareket

Fluent Design dilinde, son kullanıcılar ve uygulamalar arasındaki etkileşim son derece önemlidir. Uygulamalar yalnızca doğru bir görünüme sahip olmakla kalmamalı, aynı zamanda kullanıcılarla etkileşime girdiklerinde doğal ve dinamik bir şekilde yanıt vermelidir. Bu, bir parmağın ekrana yerleştirildiği zaman kullanıcı arabiriminin değişen giriş hassasiyetlerine düzgün bir şekilde tepki vermesi gerektiği anlamına gelir; kaydırma akıcı olmalı ve ekranda kayan bir parmağa uyum göstermelidir.

Kullanıcı girişlerine dinamik ve akıcı bir şekilde yanıt veren kullanıcı arabirimi oluşturma, kullanıcı etkileşiminin daha yüksek olmasını sağlar- Hareket artık yalnızca iyi görünmeyecek, aynı zamanda kullanıcılar farklı kullanıcı arabirimi deneyimlerinizle etkileşime geçtiğinde iyi ve doğal hissettirir. Bu, son kullanıcıların uygulamanıza daha kolay bağlanarak deneyimi daha unutulmaz ve keyifli hale getirmesini sağlar.

Dokunma ötesine geçmek

Dokunma, son kullanıcıların kullanıcı arabirimi içeriğini işlemek için kullandığı daha yaygın arabirimlerden biri olsa da, fare ve kalem gibi diğer giriş modalitelerini de kullanır. Bu gibi durumlarda, son kullanıcıların kullanıcı arabiriminizin hangi giriş modalitesini tercih ettiklerine bakılmaksızın girişlerine dinamik olarak yanıt verdiğini algılamaları önemlidir. Giriş temelli hareket deneyimleri tasarlarken farklı giriş modalitelerinin farkında olmanız gerekir.

Farklı Girdi Odaklı Hareket Deneyimleri

InputAnimation alanı, dinamik olarak yanıt veren hareket oluşturmanız için birkaç farklı deneyim sağlar. Windows Uygulama SDK'sı Oluşturma Animasyon sisteminin geri kalanında olduğu gibi, bu giriş temelli animasyonlar da dinamik hareket deneyimine katkıda bulunmaya yardımcı olan bağımsız bir iş parçacığı üzerinde çalışır. Ancak, deneyimin mevcut XAML denetimlerinden ve bileşenlerinden yararlandığı bazı durumlarda, bu deneyimlerin bazı bölümleri yine ui iş parçacığına bağlıdır.

Dinamik giriş temelli hareket animasyonları oluştururken oluşturduğunuz üç temel deneyim vardır:

1. Mevcut ScrollView Deneyimlerini Geliştirme – Dinamik animasyon deneyimlerini yönlendirmek için XAML ScrollViewer'ın konumunu etkinleştirin.
2. İşaretçi Konumu Temelli Deneyimler – dinamik animasyon deneyimlerini yönlendirmek için isabetle test edilen UIElement üzerindeki bir imlecin konumunu kullanın.
3. InteractionTracker ile Özel Manipülasyon Deneyimleri – InteractionTracker ile tam özelleştirilmiş, iş parçacığından bağımsız manipülasyon deneyimleri (kaydırma/yakınlaştırma tuvali gibi) oluşturun.

Mevcut ScrollViewer Deneyimlerini Geliştirme

Daha dinamik deneyimler oluşturmanın yaygın yollarından biri, mevcut bir XAML ScrollViewer denetiminin üzerine derlemektir. Bu gibi durumlarda, basit bir kaydırma deneyimini daha dinamik hale getiren ek kullanıcı arabirimi bileşenleri oluşturmak için ScrollViewer'ın kaydırma konumundan yararlanacaksınız. Bazı örnekler Yapışkan/Utangaç Üst Bilgiler ve Parallax'tır.

Bu tür deneyimler oluştururken izleyebileceğiniz genel bir formül vardır:

1. Animasyonu yönlendirmek istediğiniz XAML ScrollViewer üzerindeki ScrollManipulationPropertySet'e erişin.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement öğesi) API'sini kullanarak yapılır
   • Çeviri adlı bir özellik içeren bir CompositionPropertySet döndürür
2. Translation özelliğine başvuran bir denklemle Composition ExpressionAnimation oluştur.
3. Bir CompositionObject özelliğinde animasyonu başlatın.

Bu deneyimleri oluşturma hakkında daha fazla bilgi için bkz. Mevcut ScrollViewer deneyimlerini geliştirme.

İşaretçi Konumu Odaklı Deneyimler

Girişle ilgili bir diğer yaygın dinamik deneyim, Fare imleci gibi bir işaretçinin konumuna göre bir animasyonu yönlendirmektir. Bu gibi durumlarda geliştiriciler, Spotlight Reveal gibi deneyimlerin oluşturulmasını mümkün kılan bir XAML UIElement içinde test edildiğinde imlecin konumundan yararlanıyor.

Bu tür deneyimler oluştururken izleyebileceğiniz genel bir formül vardır:

1. Hit testi yapıldığında imleç konumunu öğrenmek istediğiniz XAML UIElement için PointerPositionPropertySet'e erişin.
   • ElementCompositionPreview.GetPointerPositionPropertySet(UIElement öğesi) API'sini kullanarak yapılır
   • Position adlı özelliği içeren bir CompositionPropertySet döndürür
2. Position özelliğine referans veren bir denkleme sahip bir CompositionExpressionAnimation oluşturun.
3. Bir CompositionObject nesnesinin özelliğinde animasyonu başlatın.

InteractionTracker ile özel düzenleme deneyimleri

XAML ScrollViewer kullanmanın zorluklarından biri, kullanıcı arabirimi iş parçacığına bağlı olmasıdır. Sonuç olarak, kullanıcı arabirimi iş parçacığı meşgul olursa, kaydırma ve yakınlaştırma deneyimi genellikle gecikmeli ve titrek hale gelir ve bu da hoş olmayan bir deneyimle sonuçlanır. Buna ek olarak, ScrollViewer deneyiminin birçok yönünü özelleştirmek mümkün değildir. InteractionTracker, bağımsız bir iş parçacığında çalıştırılan özel işleme deneyimleri oluşturmak için bir yapı taşları kümesi sağlayarak her iki sorunu da çözmek için oluşturulmuştur.

InteractionTracker ile deneyim oluştururken izleyebileceğiniz genel bir formül vardır:

1. InteractionTracker nesnenizi oluşturun ve özelliklerini tanımlayın.
2. InteractionTracker'ın tüketmesi için giriş yakalaması gereken herhangi bir CompositionVisual için VisualInteractionSources oluşturun.
3. InteractionTracker'ın Position özelliğine başvuran bir denklemle Bir Composition ExpressionAnimation oluşturun.
4. Bir Oluşturma Görselinin özelliğinde, InteractionTracker tarafından yönlendirilmesi istediğiniz animasyonu başlatın.