Bagikan melalui

Animasi berbasis pointer

Artikel ini menunjukkan cara menggunakan posisi penunjuk di aplikasi WinUI dan Windows App SDK untuk membuat pengalaman "tetap berpegang pada kursor" dinamis.

Prasyarat

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

Mengapa Membuat Pengalaman yang Didorong Posisi Pointer?

Dalam bahasa desain Fasih, sentuhan bukanlah satu-satunya cara untuk berinteraksi dengan UI. Karena aplikasi WinUI dapat mencakup beberapa faktor bentuk perangkat, pengguna akhir berinteraksi dengan aplikasi dengan modalitas input lainnya seperti Mouse dan Pena. Menggunakan data posisi dari modalitas input lainnya ini memberikan kesempatan untuk membuat pengguna akhir merasa lebih terhubung dengan aplikasi Anda.

Pengalaman berbasis posisi pointer memungkinkan Anda memanfaatkan posisi di layar modalitas input Pointer untuk membuat gerakan tambahan dan pengalaman UI untuk aplikasi Anda. Pengalaman ini sering dapat memberikan konteks dan umpan balik tambahan kepada pengguna akhir tentang perilaku dan struktur UI. Pengalaman ini bukan lagi aliran satu arah, melainkan mulai menjadi aliran dua arah di mana pengguna akhir memberikan input dengan modalitas input mereka dan UI aplikasi dapat merespons kembali.

Beberapa contohnya termasuk:

  • Menganimasikan posisi Sorotan untuk mengikuti kursor

    Contoh sorotan penunjuk

  • Memutar gambar berdasarkan posisi penunjuk

    Contoh rotasi pointer

Menggunakan PointerPositionPropertySet

Anda dapat membuat pengalaman ini dengan menggunakan PointerPositionPropertySet. PropertySet ini dibuat untuk sebuah UIElement untuk menjaga posisi pointer saat UIElement telah berhasil diuji. Nilai posisi relatif terhadap ruang koordinat UIElement (posisi <0,0> adalah sudut kiri atas UIElement). Anda kemudian dapat memanfaatkan properti ini yang diatur dalam Animasi untuk mendorong gerakan properti lain.

Untuk masing-masing Modalitas Input Penunjuk yang berbeda, ada sejumlah status input yang dapat berada di tempat posisi berubah: Mengambang, Ditekan, Ditekan dan Dipindahkan. PointerPositionPropertySet hanya mempertahankan posisi penunjuk di keadaan Hover, Ditekan, dan Ditekan dan Dipindahkan untuk Mouse dan Pena.

Langkah-langkah umum untuk memulai:

  1. Identifikasi UIElement, Anda ingin memiliki posisi pointer yang dilacak.
  2. Akses PointerPositionPropertySet melalui ElementCompositionPreview.
  3. Buat ExpressionAnimation yang mereferensikan properti Posisi di PropertySet.
    • Jangan lupa untuk mengatur parameter referensi Anda!
  4. Targetkan properti CompositionObject dengan ExpressionAnimation.

Nota

Disarankan agar Anda menetapkan PropertySet yang dikembalikan dari metode GetPointerPositionPropertySet 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 contoh di mana kita memanfaatkan posisi Hover dari modalitas input Mouse dan Pen untuk memutar gambar secara dinamis.

Contoh rotasi pointer

Gambar adalah UIElement, jadi mari kita pertama-tama dapatkan referensi ke PointerPositionPropertySet

_pointerPositionPropSet = ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element);

Dalam sampel ini, Anda memiliki dua Ekspresi yang sedang digunakan.

  • Ekspresi di mana gambar berputar tergantung seberapa jauh posisi penunjuk dari pusat gambar. Semakin jauh, semakin banyak rotasi.
  • Ekspresi di mana sumbu rotasi berubah berdasarkan posisi penunjuk. Anda ingin sumbu rotasi tegak lurus terhadap vektor posisi.

Di sini, Anda menentukan dua Ekspresion, satu yang menargetkan properti RotationAngle dan yang lainnya menargetkan properti RotationAxis. Anda mereferensikan PointerPositionPropertySet seperti PropertySet lainnya.

Dalam contoh ini, Anda membangun Ekspresi menggunakan kelas ExpressionBuilder .

// using EF = ExpressionBuilder.ExpressionFunctions;
// || DEFINE THE EXPRESSION FOR THE ROTATION ANGLE ||
var hoverPosition = _pointerPositionPropSet.GetSpecializedReference
<PointerPositionPropertySetReferenceNode>().Position;
var angleExpressionNode =
EF.Conditional(
 hoverPosition == new Vector3(0, 0, 0),
 ExpressionValues.CurrentValue.CreateScalarCurrentValue(),
 35 * ((EF.Clamp(EF.Distance(center, hoverPosition), 0, distanceToCenter) % distanceToCenter) / distanceToCenter));
_tiltVisual.StartAnimation("RotationAngleInDegrees", angleExpressionNode);

// || DEFINE THE EXPRESSION FOR THE ROTATION AXIS ||
var axisAngleExpressionNode = EF.Vector3(
-(hoverPosition.Y - center.Y) * EF.Conditional(hoverPosition.Y == center.Y, 0, 1),
 (hoverPosition.X - center.X) * EF.Conditional(hoverPosition.X == center.X, 0, 1),
 0);
_tiltVisual.StartAnimation("RotationAxis", axisAngleExpressionNode);

Baca juga

  • Last updated on