Pengalaman manipulasi kustom dengan InteractionTracker

Dalam artikel ini, kami menunjukkan cara menggunakan InteractionTracker untuk membuat pengalaman manipulasi kustom.

Prasyarat

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

• Animasi berbasis input
• Animasi berbasis relasi

Mengapa membuat pengalaman manipulasi kustom?

Dalam kebanyakan kasus, memanfaatkan kontrol manipulasi bawaan cukup baik untuk menciptakan pengalaman UI. Tetapi bagaimana jika Anda ingin membedakan diri dari sistem pengendalian yang biasa? Bagaimana jika Anda ingin menciptakan pengalaman tertentu yang didorong oleh input atau memiliki UI di mana gerakan manipulasi tradisional tidak cukup? Di sinilah peran penting dari menciptakan pengalaman yang disesuaikan. Mereka memungkinkan pengembang dan desainer aplikasi untuk menjadi lebih kreatif - menghadirkan pengalaman gerakan yang lebih mencerminkan merek dan bahasa desain unik mereka. Dari bawah ke atas, Anda diberi akses ke serangkaian elemen dasar yang tepat untuk sepenuhnya menyesuaikan pengalaman manipulasi - mulai dari bagaimana gerakan harus merespons terhadap sentuhan jari pada dan di luar layar hingga titik perhentian dan rantai input.

Di bawah ini adalah beberapa contoh umum saat Anda membuat pengalaman manipulasi kustom:

• Menambahkan perilaku gesek kustom, menghapus/menutup
• Efek yang dipicu oleh input (panning menyebabkan konten menjadi kabur)
• Kontrol Kustom dengan gerakan manipulasi yang disesuaikan (ListView kustom, ScrollViewer, dll.)

Mengapa menggunakan InteractionTracker?

InteractionTracker tersedia di namespace Microsoft.UI.Composition.Interactions untuk aplikasi WinUI dan Windows App SDK. InteractionTracker memungkinkan:

• Fleksibilitas Lengkap – kami ingin Anda dapat menyesuaikan dan menyesuaikan setiap aspek pengalaman manipulasi; secara khusus, gerakan yang tepat yang terjadi selama, atau sebagai respons terhadap, input. Saat membangun pengalaman manipulasi kustom dengan InteractionTracker, semua kenop yang Anda butuhkan siap Anda gunakan.
• Performa Lancar – salah satu tantangan dengan pengalaman manipulasi adalah performanya bergantung pada utas UI. Ini dapat berdampak negatif pada pengalaman manipulasi ketika UI sibuk. InteractionTracker dibangun untuk memanfaatkan mesin animasi baru yang beroperasi pada thread independen dengan 60 frame per detik, menghasilkan gerakan yang lancar.

Gambaran Umum: InteractionTracker

Saat membuat pengalaman manipulasi kustom, ada dua komponen utama yang berinteraksi dengan Anda. Kita akan membahas ini terlebih dahulu:

• InteractionTracker – objek inti yang mempertahankan komputer status yang propertinya didorong oleh input pengguna aktif atau pembaruan dan animasi langsung. Ini bertujuan untuk kemudian menyambungkan dengan CompositionAnimation guna menciptakan gerakan manipulasi khusus.
• VisualInteractionSource – objek pelengkap yang menentukan kapan dan di bawah kondisi apa input dikirim ke InteractionTracker. Ini mendefinisikan KomposisiVisual yang digunakan untuk Pengujian Hit serta properti konfigurasi input lainnya.

Sebagai komputer status, properti InteractionTracker dapat didorong oleh salah satu hal berikut:

• Interaksi Pengguna Langsung – pengguna akhir secara langsung memanipulasi dalam wilayah uji hit VisualInteractionSource
• Inertia – baik dari kecepatan terprogram atau gerakan pengguna, properti InteractionTracker menganimasikan di bawah kurva inertia
• CustomAnimation – animasi kustom yang secara langsung menargetkan properti InteractionTracker

InteractionTracker State Machine

Seperti disebutkan sebelumnya, InteractionTracker adalah mesin status dengan 4 status - yang masing-masing dapat beralih ke salah satu dari empat status lainnya. (Untuk informasi selengkapnya tentang bagaimana transisi InteractionTracker antara status ini, lihat dokumentasi kelas InteractionTracker .)

State	Deskripsi
Menganggur	Tidak ada masukan kendali aktif atau animasi aktif
Berinteraksi	Input pengguna yang aktif terdeteksi
Inersia	Gerakan aktif yang dihasilkan dari input aktif atau kecepatan terprogram
AnimasiKustom	Gerakan aktif yang dihasilkan dari animasi kustom

Dalam setiap kasus di mana status InteractionTracker berubah, peristiwa (atau panggilan balik) dihasilkan yang dapat Anda dengarkan. Agar Anda dapat mendengarkan peristiwa ini, mereka harus mengimplementasikan antarmuka IInteractionTrackerOwner dan membuat objek InteractionTracker mereka dengan metode CreateWithOwner. Diagram berikut juga menguraikan kapan berbagai peristiwa dipicu.

Menggunakan VisualInteractionSource

Agar InteractionTracker didorong oleh Input, Anda perlu menyambungkan VisualInteractionSource (VIS) ke dalamnya. VIS dibuat sebagai objek pelengkap menggunakan CompositionVisual untuk menentukan:

1. Wilayah uji hit yang akan dilacak input, dan gerakan ruang koordinat terdeteksi di
2. Konfigurasi input yang akan terdeteksi dan dirutekan, beberapa meliputi:
   • Gerakan yang dapat dideteksi: Posisi X dan Y (panning horizontal dan vertikal), Skala (jepit)
   • Inersia
   • Rel & Rantai
   • Mode Pengalihan: data input apa yang dialihkan secara otomatis ke InteractionTracker

Nota

Karena VisualInteractionSource dibuat berdasarkan posisi hasil uji dan ruang koordinat dari Visual, disarankan untuk tidak menggunakan Visual yang sedang bergerak atau berubah posisi.

Nota

Anda dapat menggunakan beberapa instance VisualInteractionSource dengan InteractionTracker yang sama jika ada beberapa wilayah tes deteksi. Namun, kasus yang paling umum adalah hanya menggunakan satu VIS.

VisualInteractionSource juga bertanggung jawab untuk mengelola ketika data masukan dari beberapa jenis modalitas (sentuhan, PTP, Pen) dirutekan ke InteractionTracker. Perilaku ini didefinisikan oleh properti ManipulationRedirectionMode. Secara default, semua input Pointer dikirim ke utas UI dan input Touchpad Presisi masuk ke VisualInteractionSource dan InteractionTracker.

Dengan demikian, jika Anda ingin memiliki Touch and Pen (Creators Update) untuk mendorong manipulasi melalui VisualInteractionSource dan InteractionTracker, Anda harus memanggil metode VisualInteractionSource.TryRedirectForManipulation. Dalam cuplikan singkat di bawah ini dari aplikasi XAML, metode ini dipanggil ketika peristiwa sentuhan ditekan terjadi di UIElement Grid paling atas:

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

Penghubungan dengan ExpressionAnimations

Saat menggunakan InteractionTracker untuk mendorong pengalaman manipulasi, Anda berinteraksi terutama dengan properti Skala dan Posisi. Seperti properti CompositionObject lainnya, properti ini dapat menjadi sasaran dan dirujuk dalam CompositionAnimation, yang paling umum adalah ExpressionAnimation.

Untuk menggunakan InteractionTracker dalam Ekspresi, referensikan properti Posisi (atau Skala) pelacak seperti pada contoh di bawah ini. Karena properti InteractionTracker dimodifikasi karena salah satu kondisi yang dijelaskan sebelumnya, output Ekspresi juga berubah.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

Nota

Saat mereferensikan posisi InteractionTracker dalam Ekspresi, Anda harus meniadakan nilai agar Ekspresi yang dihasilkan bergerak ke arah yang benar. Ini karena perkembangan InteractionTracker dari asal pada grafik dan memungkinkan Anda untuk memikirkan perkembangan InteractionTracker dalam koordinat "dunia nyata", seperti jarak dari asalnya.

Mulai

Untuk mulai menggunakan InteractionTracker untuk membuat pengalaman manipulasi kustom:

1. Buat objek InteractionTracker Anda menggunakan InteractionTracker.Create atau InteractionTracker.CreateWithOwner.
   • (Jika Anda menggunakan CreateWithOwner, pastikan Anda mengimplementasikan antarmuka IInteractionTrackerOwner.)
2. Atur posisi Min dan Max dari InteractionTracker yang baru dibuat.
3. Buat VisualInteractionSource Anda dengan CompositionVisual.
   • Pastikan visual yang Anda gunakan memiliki ukuran bukan nol. Jika tidak, itu tidak akan diuji dengan benar.
4. Atur properti VisualInteractionSource.
   • ModePengalihanSumberInteraksiVisual
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Rel & Pengelompokan
5. Tambahkan VisualInteractionSource ke InteractionTracker menggunakan InteractionTracker.InteractionSources.Add.
6. Siapkan TryRedirectForManipulation saat input Touch dan Pen terdeteksi.
   • Untuk XAML, ini biasanya dilakukan pada event PointerPressed dari UIElement.
7. Buat ExpressionAnimation yang mereferensikan posisi InteractionTracker dan menargetkan properti CompositionObject.

Berikut adalah cuplikan kode pendek yang menunjukkan #1 – 5 dalam tindakan:

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

Untuk penggunaan InteractionTracker yang lebih canggih, lihat artikel berikut ini:

• Membuat titik rekam jepret dengan InertiaModifiers
• Fungsi tarik-untuk-muat ulang dengan Pengubah Sumber