Membuat titik rekam jepret dengan pengubah inersia

Dalam artikel ini, kami menyelami lebih dalam cara menggunakan fitur InertiaModifier InteractionTracker untuk membuat pengalaman gerakan yang melekat pada titik tertentu dalam aplikasi WinUI.

Di aplikasi WinUI, InteractionTracker dan jenis pengubah inersia terkait ada di namespace Microsoft.UI.Composition.Interactions.

Prasyarat

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

• Animasi yang digerakkan oleh input
• Pengalaman manipulasi kustom dengan InteractionTracker
• Animasi berbasis relasi

Apa itu titik rekam jepret dan mengapa berguna?

Saat membangun pengalaman manipulasi kustom, terkadang sangat membantu untuk membuat titik posisi khusus dalam kanvas yang dapat digulir/dapat diperbesar yang akan selalu menjadi tempat istirahat InteractionTracker. Ini sering disebut titik rekam jepret.

Perhatikan dalam contoh berikut bagaimana pengguliran dapat meninggalkan UI dalam posisi canggung di antara gambar yang berbeda:

Jika Anda menambahkan titik jepret, saat Anda berhenti menggulir di antara gambar, titik tersebut akan menempel ke posisi yang ditentukan. Dengan titik jepret, pengalaman menggulir gambar menjadi jauh lebih teratur dan lebih responsif.

InteractionTracker dan InertiaModifiers

Saat membangun pengalaman manipulasi yang disesuaikan dengan InteractionTracker, Anda dapat membuat pengalaman gerakan snap point dengan menggunakan InertiaModifiers. InertiaModifiers pada dasarnya adalah cara bagi Anda untuk menentukan di mana atau bagaimana InteractionTracker mencapai tujuannya saat memasuki status Inertia. Anda dapat menerapkan InertiaModifiers untuk berdampak pada posisi X atau Y atau properti Skala InteractionTracker.

Ada 3 jenis InertiaModifiers:

• InteractionTrackerInertiaRestingValue – cara untuk memodifikasi posisi istirahat akhir setelah interaksi atau kecepatan terprogram. Gerakan yang telah ditentukan sebelumnya akan membawa InteractionTracker ke posisi tersebut.
• InteractionTrackerInertiaMotion – cara untuk menentukan gerakan tertentu yang akan dilakukan InteractionTracker setelah interaksi atau kecepatan terprogram. Posisi akhir akan berasal dari gerakan ini.
• InteractionTrackerInertiaNaturalMotion – cara untuk menentukan posisi istirahat akhir setelah interaksi atau kecepatan terprogram tetapi dengan animasi berbasis fisika (NaturalMotionAnimation).

Saat memasuki Inertia, InteractionTracker mengevaluasi masing-masing InertiaModifiers yang ditetapkan untuk itu dan menentukan apakah salah satu dari mereka berlaku. Ini berarti Anda dapat membuat dan menetapkan beberapa InertiaModifiers ke InteractionTracker. Tetapi, saat menentukan masing-masing, Anda perlu melakukan hal berikut:

1. Tentukan Kondisi – Sebuah ekspresi yang mendefinisikan pernyataan bersyarat ketika InertiaModifier khusus ini harus diterapkan. Ini sering kali perlu melihat NaturalRestingPosition InteractionTracker (tujuan yang diberikan inersia default).
2. Tentukan RestingValue/Motion/NaturalMotion – tentukan Ekspresi Nilai Resting, Ekspresi Gerakan, atau NaturalMotionAnimation yang sebenarnya yang terjadi saat kondisi terpenuhi.

Nota

Aspek kondisi InertiaModifiers hanya dievaluasi sekali ketika InteractionTracker memasuki Inertia. Namun, hanya untuk InertiaMotion, ekspresi gerakan dievaluasi setiap frame untuk pengubah yang kondisinya benar.

Example

Sekarang mari kita lihat bagaimana Anda dapat menggunakan InertiaModifiers untuk menciptakan pengalaman titik jepit dalam membuat ulang kanvas gambar yang dapat digulir. Dalam contoh ini, setiap manipulasi dibuat untuk dapat bergerak pada satu gambar - yang sering disebut sebagai titik tangkap wajib tunggal.

Mari kita mulai dengan menyiapkan InteractionTracker, VisualInteractionSource, dan Ekspresi yang akan memanfaatkan posisi InteractionTracker.

private void SetupInput()
{
    _tracker = InteractionTracker.Create(_compositor);
    _tracker.MinPosition = new Vector3(0f);
    _tracker.MaxPosition = new Vector3(3000f);

    _source = VisualInteractionSource.Create(_root);
    _source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    _source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;
    _tracker.InteractionSources.Add(_source);

    var scrollExp = _compositor.CreateExpressionAnimation("-tracker.Position.Y");
    scrollExp.SetReferenceParameter("tracker", _tracker);
    ElementCompositionPreview.GetElementVisual(scrollPanel).StartAnimation("Offset.Y", scrollExp);
}

Selanjutnya, karena perilaku Single Mandatory Snap Point akan memindahkan konten ke atas atau ke bawah, Anda akan memerlukan dua pengubah inertia yang berbeda: satu yang memindahkan konten yang dapat digulir ke atas, dan yang memindahkannya ke bawah.

// Snap-Point to move the content up
var snapUpModifier = InteractionTrackerInertiaRestingValue.Create(_compositor);
// Snap-Point to move the content down
var snapDownModifier = InteractionTrackerInertiaRestingValue.Create(_compositor);

Apakah akan menjepret ke atas atau ke bawah ditentukan dari di mana InteractionTracker secara alami akan berada relatif terhadap jarak snap – jarak antara lokasi snap. Jika melewati titik tengah, maka snap down, atau jika tidak maka snap up. (Dalam contoh ini, Anda menyimpan jarak jepret dalam PropertySet)

// Is NaturalRestingPosition less than the halfway point between Snap Points?
snapUpModifier.Condition = _compositor.CreateExpressionAnimation(
"this.Target.NaturalRestingPosition.y < (this.StartingValue - " + 
"mod(this.StartingValue, prop.snapDistance) + prop.snapDistance / 2)");
snapUpModifier.Condition.SetReferenceParameter("prop", _propSet);
// Is NaturalRestingPosition greater than the halfway point between Snap Points?
snapDownModifier.Condition = _compositor.CreateExpressionAnimation(
"this.Target.NaturalRestingPosition.y >= (this.StartingValue - " + 
"mod(this.StartingValue, prop.snapDistance) + prop.snapDistance / 2)");
snapDownModifier.Condition.SetReferenceParameter("prop", _propSet);

Diagram ini memberikan deskripsi visual untuk logika yang terjadi:

Sekarang Anda hanya perlu menetapkan Nilai Posisi Diam untuk setiap InertiaModifier, yaitu dengan menggerakkan posisi InteractionTracker ke posisi snap sebelumnya atau yang berikutnya.

snapUpModifier.RestingValue = _compositor.CreateExpressionAnimation(
"this.StartingValue - mod(this.StartingValue, prop.snapDistance)");
snapUpModifier.RestingValue.SetReferenceParameter("prop", _propSet);
snapDownModifier.RestingValue = _compositor.CreateExpressionAnimation(
"this.StartingValue + prop.snapDistance - mod(this.StartingValue, " + 
"prop.snapDistance)");
snapDownModifier.RestingValue.SetReferenceParameter("prop", _propSet);

Terakhir, tambahkan InertiaModifiers ke InteractionTracker. Sekarang ketika InteractionTracker memasuki InertiaState-nya, itu akan memeriksa kondisi InertiaModifiers Anda untuk melihat apakah posisinya harus dimodifikasi.

var modifiers = new InteractionTrackerInertiaRestingValue[] { 
snapUpModifier, snapDownModifier };
_tracker.ConfigurePositionYInertiaModifiers(modifiers);