Animasi berbasis input

Artikel ini menyediakan pengantar INPUTAnimation API di aplikasi WinUI dan Windows App SDK, dan merekomendasikan cara menggunakan jenis animasi ini di UI Anda.

Prasyarat

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

• Animasi berbasis relasi

Gerakan halus yang didorong dari interaksi pengguna

Dalam bahasa Desain Fasih, interaksi antara pengguna akhir dan aplikasi sangat penting. Aplikasi tidak hanya harus terlihat sesuai, tetapi juga merespons secara alami dan dinamis terhadap pengguna yang berinteraksi dengannya. Ini berarti ketika jari ditempatkan di layar, UI harus bereaksi dengan baik terhadap tingkat input yang berubah; pengguliran akan terasa mulus, dan mengikuti gerakan jari yang melintas di layar.

Membangun UI yang secara dinamis dan lancar merespons input pengguna menghasilkan keterlibatan pengguna yang lebih tinggi - Gerakan sekarang tidak hanya terlihat baik, tetapi terasa baik dan alami ketika pengguna berinteraksi dengan pengalaman UI Anda yang berbeda. Ini memungkinkan pengguna akhir untuk lebih mudah terhubung dengan aplikasi Anda, membuat pengalaman lebih mudah diingat dan menyenangkan.

Memperluas lebih dari sekadar sentuhan

Meskipun sentuhan adalah salah satu antarmuka yang lebih umum digunakan pengguna akhir untuk memanipulasi konten UI, mereka juga akan menggunakan berbagai modalitas input lainnya seperti mouse dan pena. Dalam kasus ini, penting bagi pengguna akhir untuk melihat bahwa UI Anda merespons input mereka secara dinamis, terlepas dari modalitas input apa yang mereka pilih untuk digunakan. Anda harus berkognizan dengan berbagai modalitas input saat merancang pengalaman gerakan berbasis input.

Pengalaman Gerakan yang Didorong oleh Input yang Berbeda

Ruang InputAnimation memberikan beberapa pengalaman berbeda bagi Anda untuk membuat gerakan yang merespons secara dinamis. Seperti sistem Animasi Komposisi SDK Aplikasi Windows lainnya, animasi berbasis input ini beroperasi pada utas independen, yang membantu berkontribusi pada pengalaman gerakan dinamis. Namun, dalam beberapa kasus di mana pengalaman memanfaatkan kontrol dan komponen XAML yang ada, beberapa bagian dari pengalaman tersebut masih diikat ke thread UI.

Ada tiga pengalaman inti yang Anda buat saat membangun animasi gerakan berbasis input dinamis:

1. Meningkatkan Pengalaman ScrollView yang Ada – memungkinkan posisi XAML ScrollViewer untuk mendorong pengalaman animasi dinamis.
2. Pengalaman Berbasis Posisi Pointer – menggunakan posisi kursor pada UIElement yang telah diuji menggunakan hit test untuk mengendalikan pengalaman animasi dinamis.
3. Pengalaman Manipulasi yang Dapat Dikustomisasi dengan InteractionTracker – menciptakan pengalaman manipulasi di luar thread yang sepenuhnya dapat dikustomisasi dengan InteractionTracker (seperti kanvas untuk gulir/zooming).

Meningkatkan Pengalaman ScrollViewer yang Ada

Salah satu cara umum untuk menciptakan pengalaman yang lebih dinamis adalah membangun di atas kontrol XAML ScrollViewer yang ada. Dalam situasi ini, Anda memanfaatkan posisi gulir ScrollViewer untuk membuat komponen UI tambahan yang membuat pengalaman gulir sederhana lebih dinamis. Beberapa contohnya termasuk Header Sticky/Shy dan Parallax.

Saat membuat jenis pengalaman ini, ada rumus umum yang harus diikuti:

1. Akses ScrollManipulationPropertySet dari XAML ScrollViewer yang ingin Anda kendalikan animasinya.
   • Dilakukan melalui API ElementCompositionPreview.GetScrollViewerManipulationPropertySet (elemen UIElement)
   • Mengembalikan CompositionPropertySet yang berisi properti yang disebut Terjemahan
2. Buat ExpressionAnimation Komposisi dengan persamaan yang mereferensikan properti Terjemahan.
3. Mulai animasi pada properti CompositionObject.

Untuk informasi selengkapnya tentang membangun pengalaman ini, lihat Meningkatkan pengalaman ScrollViewer yang ada.

Pengalaman berbasis Posisi Penunjuk

Pengalaman dinamis umum lainnya yang melibatkan input adalah mendorong animasi berdasarkan posisi penunjuk seperti kursor Mouse. Dalam situasi ini, pengembang memanfaatkan lokasi kursor ketika diuji dalam UIElement XAML yang membuat pengalaman seperti Spotlight Reveal dapat dibuat.

Saat membuat jenis pengalaman ini, ada rumus umum yang harus diikuti:

1. Akses PointerPositionPropertySet dari UIElement XAML yang ingin Anda ketahui posisi kursornya saat diuji.
   • Dilakukan melalui API ElementCompositionPreview.GetPointerPositionPropertySet(elemen UIElement)
   • Mengembalikan CompositionPropertySet yang berisi properti yang disebut Posisi
2. Buat CompositionExpressionAnimation dengan persamaan yang mereferensikan properti Posisi.
3. Mulai animasi pada properti CompositionObject.

Pengalaman manipulasi kustom dengan InteractionTracker

Salah satu tantangan dengan menggunakan XAML ScrollViewer adalah terikat ke thread UI. Akibatnya, pengalaman menggulir dan memperbesar tampilan sering kali dapat tertinggal dan bergoyang jika utas UI menjadi sibuk dan menghasilkan pengalaman yang tidak menarik. Selain itu, tidak mungkin untuk menyesuaikan banyak aspek pengalaman ScrollViewer. InteractionTracker dibuat untuk menyelesaikan kedua masalah dengan menyediakan serangkaian blok penyusun untuk menciptakan pengalaman manipulasi kustom yang dijalankan pada utas independen.

Saat membuat pengalaman dengan InteractionTracker, ada rumus umum yang harus diikuti:

1. Buat objek InteractionTracker Anda dan tentukan propertinya.
2. Buat VisualInteractionSources untuk CompositionVisual apa pun yang harus menangkap input agar dapat digunakan oleh InteractionTracker.
3. Buat Animasi Ekspresi Komposisi dengan persamaan yang mengacu pada properti Posisi dari InteractionTracker.
4. Mulai animasi pada properti Komposisi Visual yang ingin Anda gunakan untuk InteractionTracker.