Aracılığıyla paylaş

Mevcut ScrollViewer deneyimlerini geliştirme

Bu makalede, dinamik giriş temelli hareket deneyimleri oluşturmak için WinUI XAML ScrollViewer ve ExpressionAnimations'ın nasıl kullanılacağı açıklanmaktadır.

Önkoşullar

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

Neden ScrollViewer üzerinde inşa etmek?

Genellikle, uygulama içeriğiniz için kaydırılabilir ve yakınlaştırılabilir bir yüzey oluşturmak için mevcut XAML ScrollViewer'ı kullanırsınız. Fluent Design dilinin kullanıma sunulmasıyla birlikte, artık diğer hareket deneyimlerini yönlendirmek için bir yüzeyi kaydırma veya yakınlaştırma eyleminin nasıl kullanılacağına da odaklanmalısınız. Örneğin, bir arka planın bulanıklaştırma animasyonunu veya "sabit başlığın" konumunu hareket ettirmek için kaydırmayı kullanma.

Bu senaryolarda, uygulamanızın diğer bölümlerini daha dinamik hale getirmek için Kaydırma ve yakınlaştırma gibi davranış veya işleme deneyimlerinden yararlanacaksınız. Bunlar da uygulamanın daha uyumlu hissetmesini sağlayarak deneyimleri son kullanıcıların gözünde daha unutulmaz hale getirir. Son kullanıcılar, uygulama kullanıcı arabirimini daha akılda kalıcı hale getirerek uygulamayla daha sık ve daha uzun süre etkileşim kurar.

ScrollViewer'ın üzerine neler oluşturabilirsiniz?

Bir dizi dinamik deneyim oluşturmak için ScrollViewer'ın konumundan yararlanabilirsiniz:

  • Parallax : ScrollViewer'ın konumunu kullanarak arka plan veya ön plan içeriğini kaydırma konumuna göre bir hızda taşıyın.
  • ScrollViewer'ın konumunu kullanarak bir başlığa animasyon ekleyip konuma "yapıştırın"
  • Girdi Odaklı Efektler, bulanıklaştırma gibi bir kompozisyon efektine animasyon eklemek için Scrollviewer'ın konumunu kullanın.

Genel olarak, ExpressionAnimation ile ScrollViewer'ın konumuna başvurarak kaydırma miktarını dinamik olarak değiştiren bir animasyon oluşturabilirsiniz.

Parallax içeren liste görünümü

Cılız başlık

ScrollViewerManipulationPropertySet Kullanımı

XAML ScrollViewer kullanarak bu dinamik deneyimleri oluşturmak için, bir animasyondaki kaydırma konumuna başvurabilmeniz gerekir. Bu, ScrollViewerManipulationPropertySet adlı XAML ScrollViewer'ın dışında bir CompositionPropertySet'e erişilerek yapılır. ScrollViewerManipulationPropertySet, ScrollViewer'ın kaydırma konumuna erişim sağlayan Çeviri adlı tek bir Vector3 özelliği içerir. Daha sonra ExpressionAnimation'ınızdaki diğer CompositionPropertySet'ler gibi buna başvurabilirsiniz.

Kullanmaya başlamaya yönelik genel adımlar:

  1. ScrollViewerManipulationPropertySet öğesine ElementCompositionPreview aracılığıyla erişin.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. PropertySet'ten Translation özelliğine başvuran bir ExpressionAnimation oluşturun.
    • Başvuru Parametresini ayarlamayı unutmayın!
  3. ExpressionAnimation ile Bir CompositionObject'in özelliğini hedefle.

Uyarı

GetScrollViewerManipulationPropertySet yönteminden döndürülen PropertySet'i bir sınıf değişkenine atamanız önerilir. Bu, özellik kümesinin Çöp Toplama tarafından temizlenmesini engeller ve böylece referans alındığı ExpressionAnimation üzerinde herhangi bir etkisi olmaz. ExpressionAnimations denklemde kullanılan nesnelerin hiçbirine güçlü bir başvuru sağlamaz.

Example

Şimdi yukarıda gösterilen Parallax örneğinin nasıl bir araya getirildiğinden bakalım. Başvuru için, uygulamanın tüm kaynak kodu GitHub'daki Window UI Geliştirme Laboratuvarları deposunda bulunur.

İlk adım, ScrollViewerManipulationPropertySet'e başvuru almaktır.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Sonraki adım, ScrollViewer'ın kaydırma Konumunu kullanan bir denklem tanımlayan ExpressionAnimation oluşturmaktır.

_parallaxExpression = compositor.CreateExpressionAnimation();
_parallaxExpression.SetScalarParameter("StartOffset", 0.0f);
_parallaxExpression.SetScalarParameter("ParallaxValue", 0.5f);
_parallaxExpression.SetScalarParameter("ItemHeight", 0.0f);
_parallaxExpression.SetReferenceParameter("ScrollManipulation", _scrollProperties);
_parallaxExpression.Expression = "(ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight)) * ParallaxValue - (ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight))";

Uyarı

Ayrıca, Dizelere gerek kalmadan aynı İfadeyi oluşturmak için ExpressionBuilder yardımcı sınıflarını da kullanabilirsiniz:

var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var parallaxValue = 0.5f;
var parallax = (scrollPropSet.Translation.Y + startOffset);
_parallaxExpression = parallax * parallaxValue - parallax;

Son olarak, bu ExpressionAnimation öğesini alır ve paralaks etkisi vermek istediğiniz Görseli hedeflersiniz. Bu durumda, listedeki her öğenin resmidir.

Visual visual = ElementCompositionPreview.GetElementVisual(image);
visual.StartAnimation("Offset.Y", _parallaxExpression);
  • Last updated on