Meningkatkan pengalaman ScrollViewer yang ada

Artikel ini menjelaskan cara menggunakan WinUI 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:

• Animasi berbasis input
• Animasi berbasis relasi

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 pada latar belakang atau menggerakkan posisi "header lengket".

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
• Efek yang Dipicu oleh Input – gunakan posisi dari Scrollviewer untuk menganimasikan Efek Komposisional seperti Blur.

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

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 mereferensikan properti Translation 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 dengan demikian tidak berpengaruh pada ExpressionAnimation yang mereferensikannya. ExpressionAnimations tidak mempertahankan referensi yang kuat ke salah satu objek yang digunakan dalam persamaan.

Example

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

Hal pertama adalah mendapatkan referensi ke ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Langkah selanjutnya adalah membuat ExpressionAnimation yang menentukan persamaan yang menggambarkan 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 mengambil ExpressionAnimation ini dan menargetkan Visual yang ingin Anda terapkan efek parallax. Dalam hal ini, ini adalah gambar untuk setiap item dalam daftar.

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