Animasi berbasis penunjuk

Artikel ini menunjukkan cara menggunakan posisi penunjuk 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 Position-Driven Pointer?

Dalam bahasa desain Fluent, sentuhan bukanlah satu-satunya cara untuk berinteraksi dengan UI. Karena UWP 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 kali 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 contoh termasuk:

  • Menganimasikan posisi Sorotan untuk mengikuti kursor

    Pointer spotlight example

  • Memutar gambar berdasarkan posisi penunjuk

    Pointer rotation example

Menggunakan PointerPositionPropertySet

Anda dapat membuat pengalaman ini dengan menggunakan PointerPositionPropertySet. PropertySet ini dibuat untuk UIElement untuk mempertahankan posisi pointer sementara UIElement diuji dengan positif. 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 menjadi tempat input berubah: Arahkan kursor, Ditekan, Ditekan & Dipindahkan. PointerPositionPropertySet hanya mempertahankan posisi penunjuk di status 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. Menargetkan properti CompositionObject dengan ExpressionAnimation.

Catatan

Disarankan agar Anda menetapkan PropertySet yang dikembalikan dari metode GetPointerPositionPropertySet ke variabel kelas. Ini memastikan bahwa kumpulan properti tidak dibersihkan oleh Pengumpulan Sampah dan dengan demikian tidak berpengaruh pada ExpressionAnimation tempatnya direferensikan. ExpressionAnimations tidak mempertahankan referensi yang kuat ke salah satu objek yang digunakan dalam persamaan.

Contoh

Mari kita lihat contoh di mana kita memanfaatkan posisi Hover dari modalitas input Mouse dan Pen untuk memutar gambar secara dinamis.

Pointer rotation example

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 diputar:

  • Ekspresi di mana gambar berputar berdasarkan jauh penunjuk berasal dari tengah gambar. Semakin jauh, semakin banyak rotasi.
  • Ekspresi di mana sumbu rotasi berubah berdasarkan posisi penunjuk. Anda ingin sumbu rotasi ditegakkan ke vektor posisi.

Di sini, Anda menentukan dua Ekspresi, yang menargetkan properti RotationAngle dan properti RotationAxis lainnya. 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);

Lihat juga