Bagikan melalui

Meningkatkan pengalaman ScrollViewer yang ada

Artikel ini menjelaskan cara menggunakan XAML ScrollViewer dan ExpressionAnimations untuk membuat pengalaman gerakan berbasis input dinamis.

Prasyarat

Di sini, kami berasumsi bahwa Anda terbiasa dengan konsep yang dibahas dalam artikel ini:

Mengapa membangun di atas ScrollViewer?

Biasanya, Anda menggunakan XAML ScrollViewer yang ada untuk membuat permukaan yang dapat digulir dan dapat diperbesar untuk konten aplikasi Anda. Dengan pengenalan bahasa Desain Fasih, Anda sekarang juga harus berfokus pada cara menggunakan tindakan menggulir atau memperbesar permukaan untuk mendorong pengalaman gerakan lainnya. Misalnya, menggunakan pengguliran untuk menggerakkan animasi kabur latar belakang atau menggerakkan posisi "sticky header".

Dalam skenario ini, Anda memanfaatkan perilaku atau pengalaman manipulasi seperti Menggulir dan memperbesar tampilan untuk membuat bagian lain aplikasi Anda lebih dinamis. Ini pada gilirannya memungkinkan aplikasi untuk merasa lebih kohesif, membuat pengalaman lebih berkesan di mata pengguna akhir. Dengan membuat UI aplikasi lebih mudah diingat, pengguna akhir akan terlibat dengan aplikasi lebih sering dan untuk jangka waktu yang lebih lama.

Apa yang dapat Anda bangun di atas ScrollViewer?

Anda dapat memanfaatkan posisi ScrollViewer untuk membangun sejumlah pengalaman dinamis:

  • Parallax – gunakan posisi ScrollViewer untuk memindahkan latar belakang atau konten latar depan dengan laju relatif terhadap posisi gulir.
  • StickyHeaders - gunakan posisi ScrollViewer untuk menganimasikan dan "menempelkan" header ke posisi
  • Input-Driven Effects – gunakan posisi Scrollviewer untuk menganimasikan Efek Komposisi seperti Blur.

Secara umum, dengan merujuk posisi ScrollViewer dengan ExpressionAnimation, Anda dapat membuat animasi yang secara dinamis mengubah jumlah gulir relatif.

tampilan Daftar dengan paralaks

judul samar

Menggunakan ScrollViewerManipulationPropertySet

Untuk membuat pengalaman dinamis ini menggunakan XAML ScrollViewer, Anda harus dapat mereferensikan posisi gulir dalam animasi. Ini dilakukan dengan mengakses CompositionPropertySet dari XAML ScrollViewer yang disebut ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet berisi satu properti Vector3 yang disebut Terjemahan yang menyediakan akses ke posisi gulir ScrollViewer. Anda kemudian dapat mereferensikan ini seperti CompositionPropertySet lainnya di ExpressionAnimation Anda.

Langkah-langkah Umum untuk memulai:

  1. Akses ScrollViewerManipulationPropertySet melalui ElementCompositionPreview.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. Buat ExpressionAnimation yang mengacu pada properti translasi dari PropertySet.
    • Jangan lupa untuk mengatur Parameter Referensi!
  3. Targetkan properti CompositionObject dengan ExpressionAnimation.

Nota

Disarankan agar Anda menetapkan PropertySet yang dikembalikan dari metode GetScrollViewerManipulationPropertySet ke variabel kelas. Ini memastikan bahwa kumpulan properti tidak dibersihkan oleh Garbage Collection dan sehingga tidak berpengaruh pada ExpressionAnimation di mana ia dirujuk. ExpressionAnimations tidak mempertahankan referensi yang kuat ke salah satu objek yang digunakan dalam persamaan.

Contoh

Mari kita lihat bagaimana sampel Parallax yang ditunjukkan di atas disatukan. Sebagai referensi, semua kode sumber untuk aplikasi ditemukan di repositori Dev Labs antarmuka pengguna Jendela di GitHub.

Hal pertama adalah mendapatkan referensi ke ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Langkah selanjutnya adalah membuat ExpressionAnimation yang menentukan persamaan yang menggunakan posisi gulir dari ScrollViewer.

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

Nota

Anda juga dapat menggunakan kelas pembantu ExpressionBuilder untuk membangun Ekspresi yang sama ini tanpa perlu String:

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

Terakhir, Anda menggunakan ExpressionAnimation ini untuk menargetkan Visual yang ingin Anda beri efek paralaks. Dalam hal ini, ini adalah gambar untuk setiap item dalam daftar.

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