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:

• 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 mendorong animasi kabur latar belakang atau mendorong 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 Berbasis Input – 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.

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 Terjemahan dari PropertySet.
   • Jangan lupa untuk mengatur Parameter Referensi!
3. Targetkan properti CompositionObject dengan ExpressionAnimation.

Contoh

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 menggunakan gulir Posisi 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))";

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 parallax. Dalam hal ini, ini adalah gambar untuk setiap item dalam daftar.

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