Animasi berbasis input

Artikel ini menyediakan pengenalan api InputAnimation, 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 melihat bagian , tetapi juga merespons secara alami dan dinamis kepada pengguna yang berinteraksi dengan mereka. Ini berarti ketika jari ditempatkan di layar, UI harus bereaksi dengan anggun terhadap perubahan derajat input; menggulir akan terasa halus, dan menempel pada jari yang melintasi layar.

Membangun UI yang secara dinamis dan lancar merespons hasil input pengguna dalam 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 berkesan dan menyenangkan.

Memperluas masa lalu hanya dengan 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 menganggap bahwa UI Anda merespons input mereka secara dinamis, terlepas dari modalitas input apa yang mereka pilih untuk digunakan. Anda harus mengenali berbagai modalitas input saat merancang pengalaman gerakan berbasis input.

Pengalaman Gerakan Input-Driven berbeda

Ruang InputAnimation memberikan beberapa pengalaman berbeda bagi Anda untuk membuat gerakan yang merespons secara dinamis. Seperti sistem Animasi Windows UI 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, bagian dari pengalaman tersebut masih terikat utas 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 diuji hit untuk mendorong pengalaman animasi dinamis.
3. Pengalaman Manipulasi Kustom dengan InteractionTracker - menciptakan pengalaman manipulasi off-thread yang sepenuhnya disesuaikan dengan InteractionTracker (seperti kanvas gulir/zooming).

Meningkatkan Pengalaman ScrollViewer yang Ada

Salah satu cara umum untuk menciptakan pengalaman yang lebih dinamis adalah dengan 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 dorong 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 XAML UIElement 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 memanfaatkan XAML ScrollViewer adalah terikat dengan utas 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 KomposisiVisual apa pun yang harus menangkap input untuk dikonsumsi InteractionTracker.
3. Buat ExpressionAnimation Komposisi dengan persamaan yang mereferensikan properti Posisi InteractionTracker.
4. Mulai animasi pada properti Visual Komposisi yang ingin Anda drive oleh InteractionTracker.