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.

Prasyarat

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

• Animasi berbasis 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 rekam jepret, saat Anda berhenti menggulir di antara gambar, titik tersebut "memposisikan" ke posisi tertentu. Dengan titik rekam jepret, itu membuat pengalaman menggulir gambar jauh lebih bersih 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 memengaruhi 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 – Ekspresi yang menentukan pernyataan kondisional ketika InertiaModifier khusus ini harus berlangsung. Ini sering membutuhkan melihat NaturalRestingPosition InteractionTracker (tujuan yang diberikan inertia default).
2. Tentukan RestingValue/Motion/NaturalMotion – tentukan Ekspresi Nilai Resting, Ekspresi Gerakan, atau NaturalMotionAnimation yang sebenarnya yang terjadi saat kondisi terpenuhi.

Contoh

Sekarang mari kita lihat bagaimana Anda dapat menggunakan InertiaModifiers untuk membuat beberapa pengalaman titik snap untuk membuat ulang kanvas gambar yang menggulir. Dalam contoh ini, setiap manipulasi dimaksudkan untuk berpotensi bergerak melalui satu gambar - ini sering disebut sebagai Single Mandatory Snap Points.

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 Snap Point Wajib Tunggal akan memindahkan konten ke atas atau ke bawah, Anda akan memerlukan dua pengubah inertia yang berbeda: 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 memposisikan ke atas atau ke bawah ditentukan berdasarkan di mana InteractionTracker secara alami akan mendarat dalam relatif terhadap jarak jepret - jarak antara lokasi snap. Jika melewati setengah titik, maka snap down, jika tidak 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 menentukan Nilai Istirahat untuk setiap InertiaModifier: memindahkan 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 memasukinya adalah InertiaState, itu akan memeriksa kondisi InertiaModifiers Anda untuk melihat apakah posisinya harus dimodifikasi.

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